feat: wangeditor富文本添加多个富文本和自定义图片上传示例

src/views/editor/index.vue

@@ -1,41 +1,12 @@
 <script setup lang="ts">
-import "@wangeditor/editor/dist/css/style.css"; // 引入 css
-import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
-import Edit from "@iconify-icons/ep/edit";
+import { ref } from "vue";
+import { Base, Multi, PicUpload } from "./components";
 
 defineOptions({
   name: "Editor"
 });
 
-const mode = "default";
-// 编辑器实例，必须用 shallowRef
-const editorRef = shallowRef();
-
-// 内容 HTML
-const valueHtml = ref("<p>hello</p>");
-
-// 模拟 ajax 异步获取内容
-onMounted(() => {
-  setTimeout(() => {
-    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
-  }, 1500);
-});
-
-const toolbarConfig: any = { excludeKeys: "fullScreen" };
-const editorConfig = { placeholder: "请输入内容..." };
-
-// 组件销毁时，也及时销毁编辑器
-onBeforeUnmount(() => {
-  const editor = editorRef.value;
-  if (editor == null) return;
-  editor.destroy();
-});
-
-const handleCreated = editor => {
-  editorRef.value = editor; // 记录 editor 实例，重要！
-};
+const activeNames = ref(["1"]);
 </script>
 
 <template>
@@ -47,7 +18,6 @@ const handleCreated = editor => {
           <el-link
             href="https://www.wangeditor.com"
             target="_blank"
-            :icon="useRenderIcon(Edit)"
             style="margin: 0 4px 5px; font-size: 16px"
           >
             Wangeditor
@@ -55,20 +25,22 @@ const handleCreated = editor => {
         </span>
       </div>
     </template>
-    <div class="wangeditor">
-      <Toolbar
-        style="border-bottom: 1px solid #ccc"
-        :editor="editorRef"
-        :defaultConfig="toolbarConfig"
-        :mode="mode"
-      />
-      <Editor
-        style="height: 500px; overflow-y: hidden"
-        v-model="valueHtml"
-        :defaultConfig="editorConfig"
-        :mode="mode"
-        @onCreated="handleCreated"
-      />
-    </div>
+    <el-collapse v-model="activeNames" accordion>
+      <el-collapse-item title="基础用法" name="1">
+        <Base />
+      </el-collapse-item>
+      <el-collapse-item title="多个富文本" name="2">
+        <Multi />
+      </el-collapse-item>
+      <el-collapse-item title="自定义图片上传" name="3">
+        <PicUpload />
+      </el-collapse-item>
+    </el-collapse>
   </el-card>
 </template>
+
+<style lang="scss" scoped>
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+}
+</style>