添加 cl-editor-wang 组件

src/modules/base/components/editor/quill.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="cl-editor-quill">
 		<div ref="Editor" class="editor" :style="style"></div>
-		<cl-upload-space ref="Upload" :show-btn="false" @confirm="onUploadConfirm" />
+		<cl-upload-space ref="Upload" :show-btn="false" @confirm="onSpaceConfirm" />
 	</div>
 </template>
 
@@ -26,14 +26,14 @@ export default defineComponent({
 	setup(props, { emit }) {
 		let quill: any = null;
 
-		const Editor = ref<any>();
-		const Upload = ref<any>();
+		const Editor = ref();
+		const Upload = ref();
 
 		// 文本内容
-		const content = ref<string>("");
+		const content = ref("");
 
 		// 光标位置
-		const cursorIndex = ref<number>(0);
+		const cursorIndex = ref(0);
 
 		// 上传处理
 		function uploadFileHandler() {
@@ -47,7 +47,7 @@ export default defineComponent({
 		}
 
 		// 文件确认
-		function onUploadConfirm(files: any[]) {
+		function onSpaceConfirm(files: any[]) {
 			if (files.length > 0) {
 				// 批量插入图片
 				files.forEach((file, i) => {
@@ -146,7 +146,7 @@ export default defineComponent({
 			cursorIndex,
 			style,
 			setContent,
-			onUploadConfirm
+			onSpaceConfirm
 		};
 	}
 });

src/modules/base/components/editor/wang.vue

@@ -0,0 +1,140 @@
+<template>
+	<div class="cl-editor-wang">
+		<!-- 工具栏 -->
+		<toolbar :editor="editorRef" :mode="mode" />
+
+		<!-- 编辑框 -->
+		<editor
+			v-model="value"
+			:defaultConfig="editorConfig"
+			:mode="mode"
+			:style="{
+				height
+			}"
+			@onCreated="onCreated"
+			@onFocus="onFocus"
+			@onBlur="onBlur"
+			@onChange="onChange"
+		/>
+
+		<!-- 图片 -->
+		<cl-upload-space
+			ref="ImageSpace"
+			accept="image/*"
+			:show-btn="false"
+			@confirm="onSpaceConfirm"
+		/>
+
+		<!-- 视频 -->
+		<cl-upload-space
+			ref="VideoSpace"
+			accept="video/*"
+			:show-btn="false"
+			@confirm="onSpaceConfirm"
+		/>
+	</div>
+</template>
+
+<script lang="ts" name="cl-editor-wang" setup>
+import "@wangeditor/editor/dist/css/style.css";
+import { onBeforeUnmount, ref, shallowRef, watch, PropType, reactive } from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { IEditorConfig } from "@wangeditor/editor";
+
+const props = defineProps({
+	modelValue: String,
+	mode: {
+		type: String as PropType<"default" | "simple">,
+		default: "default"
+	},
+	height: {
+		type: String,
+		default: "400px"
+	}
+});
+
+const emit = defineEmits(["update:modelValue", "change", "focus", "blur"]);
+
+const ImageSpace = ref();
+const VideoSpace = ref();
+const editorRef = shallowRef();
+
+const value = ref();
+
+watch(
+	() => props.modelValue,
+	(val) => {
+		value.value = val;
+		console.log(val);
+	},
+	{
+		immediate: true
+	}
+);
+
+function onCreated(editor: any) {
+	editorRef.value = editor;
+}
+
+function onFocus(editor: any) {
+	emit("focus", editor);
+}
+
+function onBlur(editor: any) {
+	emit("blur", editor);
+}
+
+function onChange() {
+	emit("update:modelValue", value.value);
+	emit("change", value.value);
+}
+
+const temp = reactive<any>({
+	insertFn: null
+});
+
+// 配置
+const editorConfig: Partial<IEditorConfig> = {
+	placeholder: "请输入",
+	MENU_CONF: {
+		uploadImage: {
+			customBrowseAndUpload(insertFn: any) {
+				temp.insertFn = insertFn;
+				ImageSpace.value.open();
+			}
+		},
+		uploadVideo: {
+			customBrowseAndUpload(insertFn: any) {
+				temp.insertFn = insertFn;
+				VideoSpace.value.open();
+			}
+		}
+	}
+};
+
+// 文件确认
+function onSpaceConfirm(files: any[]) {
+	if (files.length > 0) {
+		files.forEach((file) => {
+			temp.insertFn(file.url);
+		});
+	}
+}
+
+onBeforeUnmount(() => {
+	const editor = editorRef.value;
+	if (editor == null) return;
+	editor.destroy();
+});
+</script>
+
+<style lang="scss" scoped>
+.cl-editor-wang {
+	border: 1px solid var(--el-border-color);
+	box-sizing: border-box;
+
+	:deep(.w-e-toolbar) {
+		border-bottom: 1px solid var(--el-border-color);
+	}
+}
+</style>