refactor: ♻️ 使用 wangeditor-next 替换 wangeditor ，重构简化富文本编辑器组件的封装

package.json

@@ -47,8 +47,8 @@
     "@element-plus/icons-vue": "^2.3.1",
     "@stomp/stompjs": "^7.0.0",
     "@vueuse/core": "^10.11.1",
-    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor-next/editor": "^5.6.29",
-    "@wangeditor/editor-for-vue": "5.1.10",
+    "@wangeditor-next/editor-for-vue": "^5.1.14",
     "axios": "^1.7.9",
     "codemirror": "^5.65.18",
     "codemirror-editor-vue3": "^2.8.0",

src/components/WangEditor/index.vue

@@ -1,80 +1,94 @@
+<!--
+ * wangEditor 富文本编辑器组件
+ * Copyright © 2021-present 有来开源组织
+ * 
+ * 本组件基于 wangEditor-next 进行二次封装，支持 Vue 3.x
+ * 作者：有来开源-Ray 
+ *
+ * 使用请保留本段注释，感谢支持开源！
+ * 参考官方示例：https://stackblitz.com/edit/vue3-wangeditor-demo-8emmc7?file=src%2Fcomponents%2FBasicEditor.vue
+ * 
+ * 开源协议：MIT License
+ * 详情参见：https://opensource.org/licenses/MIT
+ -->
+
 <template>
-  <div class="editor-wrapper">
+  <div style="z-index: 999; border: 1px solid #ccc">
     <!-- 工具栏 -->
     <Toolbar
-      id="toolbar-container"
       :editor="editorRef"
+      mode="simple"
       :default-config="toolbarConfig"
-      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
     />
     <!-- 编辑器 -->
     <Editor
-      id="editor-container"
       v-model="modelValue"
+      :style="{ height: height, overflowY: 'hidden' }"
       :default-config="editorConfig"
-      :mode="mode"
+      mode="simple"
-      style="height: 500px; overflow-y: hidden"
-      @on-change="handleChange"
       @on-created="handleCreated"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import "@wangeditor-next/editor/dist/css/style.css";
+import { Toolbar, Editor } from "@wangeditor-next/editor-for-vue";
+import { IToolbarConfig, IEditorConfig } from "@wangeditor-next/editor";
 
-// API 引用
+// 文件上传 API
 import FileAPI from "@/api/file";
 
-const props = defineProps({
+// 上传图片回调函数类型
-  modelValue: {
+type InsertFnType = (url: string, alt: string, href: string) => void;
-    type: [String],
+
-    default: "",
+defineProps({
-  },
+  height: {
-  excludeKeys: {
+    type: String,
-    type: Array<string>,
+    default: "500px",
-    default: [],
   },
 });
 
 const emit = defineEmits(["update:modelValue"]);
 
-const modelValue = useVModel(props, "modelValue", emit);
+// 双向绑定
+const modelValue = defineModel("modelValue", {
+  type: String,
+  required: false,
+});
+
+// 编辑器实例，必须用 shallowRef，重要！
+const editorRef = shallowRef();
+
+// 工具栏配置
+const toolbarConfig = ref<Partial<IToolbarConfig>>({});
 
-const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
-const mode = ref("simple"); // 编辑器模式
-const toolbarConfig = ref({
-  excludeKeys: props.excludeKeys,
-}); // 工具条配置
 // 编辑器配置
-const editorConfig = ref({
+const editorConfig = ref<Partial<IEditorConfig>>({
   placeholder: "请输入内容...",
   MENU_CONF: {
     uploadImage: {
-      // 自定义图片上传
+      customUpload(file: File, insertFn: InsertFnType) {
-      async customUpload(file: any, insertFn: any) {
+        // 上传图片
-        FileAPI.upload(file).then((data) => {
+        FileAPI.upload(file).then((res) => {
-          insertFn(data.url);
+          // 插入图片
+          insertFn(res.url, res.name, res.url);
         });
       },
-    },
+    } as any,
   },
 });
 
+// 记录 editor 实例，重要！
 const handleCreated = (editor: any) => {
-  editorRef.value = editor; // 记录 editor 实例，重要！
+  editorRef.value = editor;
 };
 
-function handleChange(editor: any) {
+// 组件销毁时，也及时销毁编辑器，重要！
-  modelValue.value = editor.getHtml();
-}
-
-// 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
   const editor = editorRef.value;
   if (editor == null) return;
   editor.destroy();
 });
 </script>
-
-<style src="@wangeditor/editor/dist/css/style.css"></style>

src/views/demo/wang-editor.vue

@@ -1,8 +1,8 @@
 <!-- wangEditor富文本编辑器示例 -->
 <script setup lang="ts">
-import Editor from "@/components/WangEditor/index.vue";
+import WangEditor from "@/components/WangEditor/index.vue";
 
-const value = ref("初始内容");
+const value = ref("初始化内容");
 </script>
 
 <template>
@@ -15,6 +15,10 @@ const value = ref("初始内容");
     >
       示例源码 请点击>>>>
     </el-link>
-    <editor v-model="value" style="z-index: 99999; height: calc(100vh - 180px)" />
+    <WangEditor v-model="value" height="400px" />
+
+    <div style="margin-top: 10px">
+      <textarea v-model="value" readonly style="width: 100%; height: 200px; outline: none" />
+    </div>
   </div>
 </template>

src/views/system/notice/index.vue

@@ -177,9 +177,7 @@
           <el-input v-model="formData.title" placeholder="通知标题" clearable />
         </el-form-item>
         <el-form-item label="通知内容" prop="content">
-          <div style="border: 1px solid #dcdfe6; border-radius: 4px">
+          <WangEditor v-model="formData.content" />
-            <WangEditor v-model="formData.content" style="min-height: 480px" />
-          </div>
         </el-form-item>
         <el-form-item label="通知类型" prop="type">
           <Dict v-model="formData.type" code="notice_type" />
@@ -411,8 +409,3 @@ onMounted(() => {
   handleQuery();
 });
 </script>
-<style>
-.editor-wrapper {
-  border: 1px solid #dcdfe6;
-}
-</style>