// main.ts
import "@qingbing/ts-v3-xz-editor/dist/css/preview.css" // xz-editor 组件定义的一套编辑器基础样式
import '@wangeditor/editor/dist/css/style.css' // wangeditor 样式表
import "@qingbing/ts-v3-xz-editor/dist/style.css" // xz-editor 组件定义样式
import { XzEditorPlugin } from '@qingbing/ts-v3-xz-editor'
app.use(XzEditorPlugin, {
name: 'Editor',
options: {}
})<template>
<h2>mini</h2>
<XzEditor ref="editor-mini" v-model="miniContent" mode="mini" :showHtml="true" />
<h2>normal</h2>
<XzEditor ref="editor-normal" v-model="normalContent" mode="normal" :showHtml="true" />
<h2>full</h2>
<XzEditor ref="editor-full" v-model="fullContent" mode="full" :showHtml="true" />
<h2>default</h2>
<XzEditor ref="editor-default" v-model="defaultContent" mode="default" :showHtml="true" />
<h2>simple</h2>
<XzEditor ref="editor-simple" v-model="simpleContent" mode="simple" :showHtml="true" />
<hr>
<button @click="onClick">获取 editor</button>
<XzEditor ref="editorRef" v-model="content" :showHtml="true" :editorEvents="events"
:uploadImageServer="uploadImageServer" :uploadImage="uploadImage" mode="default" />
<p>{{ content }}</p>
</template>
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // wangeditor 样式表
import "@qingbing/ts-v3-xz-editor/dist/style.css" // xz-editor 组件定义样式
import type { IDomEditor } from "@wangeditor/editor";
import type { TXzEditorEvents } from '@qingbing/ts-v3-xz-editor' // 如果注册成了全局组件，这句将不再需要
import { XzEditor } from '@qingbing/ts-v3-xz-editor' // 如果注册成了全局组件，这句将不再需要
import { Toolbar } from "@wangeditor/editor";
import { ref } from "vue";
const content = ref("what")
const uploadImageServer = 'http://mock.qiyezhu.net/mock/64e35b8e4a2b7b001dd2e4ec/example/upload-image-server'
const uploadImage = {
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': "Content-Type"
}
}
const events: TXzEditorEvents = {
onBlur(editor) {
console.log("blur", editor);
},
onChange: (editor) => {
console.log("change", editor);
}
}
const editorRef = ref({
editor: "",
getToolbar: ((): Toolbar | void => { return })
})
const onClick = () => {
const editor: IDomEditor = editorRef.value.editor as unknown as IDomEditor
const toolbar: Toolbar = editorRef.value.getToolbar() as Toolbar
const menuKeys = editor.getAllMenuKeys()
const toolbarConf = toolbar.getConfig()
const toolbarMenus = toolbar.getMenus()
console.log(menuKeys);
console.log(toolbarConf);
console.log(toolbarConf.toolbarKeys);
console.log(toolbarMenus);
}
const miniContent = ref("mini")
const normalContent = ref("normal")
const fullContent = ref("full")
const defaultContent = ref("default")
const simpleContent = ref("simple")
</script>