first commiit

src/components/WangEditor/index.vue

@@ -0,0 +1,90 @@
+<!--
+ * 基于 wangEditor-next 的富文本编辑器组件二次封装
+ * 版权所有 © 2021-present 有来开源组织
+ *
+ * 开源协议：https://opensource.org/licenses/MIT
+ * 项目地址：https://gitee.com/youlaiorg/vue3-element-admin
+ *
+ * 在使用时，请保留此注释，感谢您对开源的支持！
+ -->
+
+<template>
+  <div style="z-index: 999; border: 1px solid #ccc">
+    <!-- 工具栏 -->
+    <Toolbar
+      :editor="editorRef"
+      mode="simple"
+      :default-config="toolbarConfig"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <!-- 编辑器 -->
+    <Editor
+      v-model="modelValue"
+      :style="{ height: height, overflowY: 'hidden' }"
+      :default-config="editorConfig"
+      mode="simple"
+      @on-created="handleCreated"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+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
+import FileAPI from "@/api/file";
+
+// 上传图片回调函数类型
+type InsertFnType = (url: string, alt: string, href: string) => void;
+
+defineProps({
+  height: {
+    type: String,
+    default: "500px",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// 双向绑定
+const modelValue = defineModel("modelValue", {
+  type: String,
+  required: false,
+});
+
+// 编辑器实例，必须用 shallowRef，重要！
+const editorRef = shallowRef();
+
+// 工具栏配置
+const toolbarConfig = ref<Partial<IToolbarConfig>>({});
+
+// 编辑器配置
+const editorConfig = ref<Partial<IEditorConfig>>({
+  placeholder: "请输入内容...",
+  MENU_CONF: {
+    uploadImage: {
+      customUpload(file: File, insertFn: InsertFnType) {
+        // 上传图片
+        FileAPI.uploadFile(file).then((res) => {
+          // 插入图片
+          insertFn(res.url, res.name, res.url);
+        });
+      },
+    } as any,
+  },
+});
+
+// 记录 editor 实例，重要！
+const handleCreated = (editor: any) => {
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器，重要！
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>