完善请求

src/components/editor/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, watch, defineComponent } from 'vue';
+import { toRefs, reactive, onMounted, watch, defineComponent, onUnmounted, nextTick } from 'vue';
 import { createEditor, createToolbar, IEditorConfig, IToolbarConfig, IDomEditor } from '@wangeditor/editor';
 import '@wangeditor/editor/dist/css/style.css';
 import { toolbarKeys } from './toolbar';
@@ -15,7 +15,8 @@ import { toolbarKeys } from './toolbar';
 interface WangeditorState {
 	editorToolbar: HTMLDivElement | null;
 	editorContent: HTMLDivElement | null;
-	editor: any;
+	editor: IDomEditor | null;
+	isInitialized: boolean;
 }
 
 export default defineComponent({
@@ -37,9 +38,7 @@ export default defineComponent({
 			default: () => '请输入内容',
 		},
 		// 双向绑定：双向绑定值，字段名为固定，改了之后将不生效
-		// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
 		modelValue: String,
-		// https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
 		// 模式，可选 <default|simple>，默认 default
 		mode: {
 			type: String,
@@ -56,57 +55,103 @@ export default defineComponent({
 			editorToolbar: null,
 			editor: null,
 			editorContent: null,
+			isInitialized: false,
 		});
+
 		// 富文本配置
-		const wangeditorConfig = () => {
-			const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
-			props.isDisable ? (editorConfig.readOnly = true) : (editorConfig.readOnly = false);
-			editorConfig.placeholder = props.placeholder;
+		const wangeditorConfig = (): Partial<IEditorConfig> => {
+			const editorConfig: Partial<IEditorConfig> = {
+				MENU_CONF: {},
+				readOnly: props.isDisable,
+				placeholder: props.placeholder,
+			};
+
 			editorConfig.onChange = (editor: IDomEditor) => {
-				// console.log('content', editor.children);
-				// console.log('html', editor.getHtml());
 				emit('update:modelValue', editor.getHtml());
 			};
+
 			(<any>editorConfig).MENU_CONF['uploadImage'] = {
 				base64LimitSize: 10 * 1024 * 1024,
 			};
+
 			return editorConfig;
 		};
-		//
-		const toolbarConfig = () => {
-			const toolbarConfig: Partial<IToolbarConfig> = {};
-			toolbarConfig.toolbarKeys = toolbarKeys;
-			return toolbarConfig;
+
+		const toolbarConfig = (): Partial<IToolbarConfig> => {
+			return {
+				toolbarKeys: toolbarKeys,
+			};
 		};
+
+		// 销毁编辑器
+		const destroyEditor = () => {
+			if (state.editor) {
+				state.editor.destroy();
+				state.editor = null;
+				state.isInitialized = false;
+			}
+		};
+
 		// 初始化富文本
-		// https://www.wangeditor.com/
 		const initWangeditor = () => {
-			state.editor = createEditor({
-				html: props.modelValue,
-				selector: state.editorContent!,
-				config: wangeditorConfig(),
-				mode: props.mode,
-			});
-			createToolbar({
-				editor: state.editor,
-				selector: state.editorToolbar!,
-				mode: props.mode,
-				config: toolbarConfig(),
+			// 先销毁旧的编辑器
+			destroyEditor();
+
+			nextTick(() => {
+				if (!state.editorContent) return;
+
+				state.editor = createEditor({
+					html: props.modelValue || '',
+					selector: state.editorContent,
+					config: wangeditorConfig(),
+					mode: props.mode,
+				});
+
+				createToolbar({
+					editor: state.editor,
+					selector: state.editorToolbar!,
+					mode: props.mode,
+					config: toolbarConfig(),
+				});
+
+				state.isInitialized = true;
 			});
 		};
+
 		// 页面加载时
 		onMounted(() => {
 			initWangeditor();
 		});
+
+		// 组件卸载时销毁编辑器
+		onUnmounted(() => {
+			destroyEditor();
+		});
+
 		// 监听双向绑定值的改变
-		// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
 		watch(
 			() => props.modelValue,
 			(value) => {
-				state.editor.clear();
-				state.editor.dangerouslyInsertHtml(value);
+				if (state.editor && state.isInitialized) {
+					// 只有当内容确实改变时才更新
+					const currentHtml = state.editor.getHtml();
+					if (currentHtml !== value) {
+						state.editor.setHtml(value || '');
+					}
+				}
 			}
 		);
+
+		// 监听禁用状态变化
+		watch(
+			() => props.isDisable,
+			(disabled) => {
+				if (state.editor) {
+					state.editor.setDisabled(disabled);
+				}
+			}
+		);
+
 		return {
 			...toRefs(state),
 		};