first

src/components/wangEditor/index.vue

@@ -0,0 +1,74 @@
+<template>
+    <div style='border: 1px solid #e4e4e4;height: 100%'>
+        <Toolbar
+            style='border-bottom: 1px solid #e4e4e4;border-top: 1px solid #e4e4e4'
+            :editor='editorRef'
+            :defaultConfig='toolbarConfig'
+            mode='default'
+        />
+        <Editor
+            v-bind='$attrs'
+            :defaultConfig='editorConfig'
+            mode='default'
+            @onCreated='handleCreated'
+            style='height: calc(100% - 42px); '
+        />
+    </div>
+</template>
+<script lang='ts' setup>
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
+// 内容 HTML
+const valueHtml = ref('<p>hello</p>')
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+    setTimeout(() => {
+        valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
+    }, 1500)
+})
+
+const toolbarConfig = {
+    excludeKeys: ['fullScreen', 'emotion']
+}
+let sever = '/cs-harmonic-boot/csconfiguration/uploadImage'
+// 本地加api
+if (process.env.NODE_ENV === 'development') {
+    sever = '/api' + sever
+}
+const editorConfig = {
+    placeholder: '请输入内容...',
+    MENU_CONF: {
+        uploadImage: {
+            server: sever,
+            fieldName: 'file',
+            compress: true,
+            uploadFileName: 'file',
+            withCredentials: true,
+            headers: {},
+            timeout: 0,
+            customInsert: (insertImg, result, editor) => {
+                const url = result.data.url
+                insertImg(url)
+            }
+        }
+    }
+}
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+    const editor = editorRef.value
+    if (editor == null) return
+    editor.destroy()
+})
+
+const handleCreated = (editor) => {
+    editorRef.value = editor // 记录 editor 实例，重要！
+}
+
+</script>