修改状态字段

src/components/editor/index.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="editor-container">
-		<div ref="editorToolbar"></div>
-		<div ref="editorContent" :style="{ height }"></div>
+	<div class="editor-container" :class="{ 'disabled-editor': disableExceptEmotion }">
+		<div ref="editorToolbar" class="editor-toolbar"></div>
+		<div ref="editorContent" :style="{ height }" class="editor-content"></div>
 	</div>
 </template>
 
@@ -32,6 +32,11 @@ export default defineComponent({
 			type: Boolean,
 			default: () => false,
 		},
+		// 是否禁用除表情外的所有功能
+		disableExceptEmotion: {
+			type: Boolean,
+			default: () => false,
+		},
 		// 内容框默认 placeholder
 		placeholder: {
 			type: String,
@@ -70,6 +75,11 @@ export default defineComponent({
 				emit('update:modelValue', editor.getHtml());
 			};
 
+			// 即使编辑器只读，也允许表情插入
+			if (props.disableExceptEmotion) {
+				editorConfig.readOnly = false; // 允许编辑，但通过CSS禁用其他功能
+			}
+
 			(<any>editorConfig).MENU_CONF['uploadImage'] = {
 				base64LimitSize: 10 * 1024 * 1024,
 			};
@@ -94,7 +104,6 @@ export default defineComponent({
 
 		// 初始化富文本
 		const initWangeditor = () => {
-			// 先销毁旧的编辑器
 			destroyEditor();
 
 			nextTick(() => {
@@ -115,6 +124,35 @@ export default defineComponent({
 				});
 
 				state.isInitialized = true;
+
+				// 初始化后应用禁用状态
+				applyDisableState();
+			});
+		};
+
+		// 应用禁用状态
+		const applyDisableState = () => {
+			if (!state.editorToolbar || !props.disableExceptEmotion) return;
+
+			nextTick(() => {
+				const toolbarItems = state.editorToolbar!.querySelectorAll('.w-e-bar-item');
+				toolbarItems.forEach((item: Element) => {
+					const button = item.querySelector('button');
+					if (button) {
+						const dataTitle = button.getAttribute('data-title') || '';
+						const isEmotionButton = dataTitle.includes('表情') || dataTitle.toLowerCase().includes('emotion');
+
+						if (!isEmotionButton) {
+							(item as HTMLElement).style.opacity = '0.5';
+							(item as HTMLElement).style.pointerEvents = 'none';
+							(item as HTMLElement).style.cursor = 'not-allowed';
+						} else {
+							(item as HTMLElement).style.opacity = '1';
+							(item as HTMLElement).style.pointerEvents = 'auto';
+							(item as HTMLElement).style.cursor = 'pointer';
+						}
+					}
+				});
 			});
 		};
 
@@ -133,7 +171,6 @@ export default defineComponent({
 			() => props.modelValue,
 			(value) => {
 				if (state.editor && state.isInitialized) {
-					// 只有当内容确实改变时才更新
 					const currentHtml = state.editor.getHtml();
 					if (currentHtml !== value) {
 						state.editor.setHtml(value || '');
@@ -152,9 +189,61 @@ export default defineComponent({
 			}
 		);
 
+		// 监听禁用除表情外的状态变化
+		watch(
+			() => props.disableExceptEmotion,
+			(disabled) => {
+				if (state.editor && state.isInitialized) {
+					applyDisableState();
+				}
+			}
+		);
+
 		return {
 			...toRefs(state),
 		};
 	},
 });
 </script>
+
+<style scoped>
+.editor-container {
+	position: relative;
+}
+
+/* 禁用除表情外的所有工具栏按钮 */
+.disabled-editor :deep(.w-e-bar-item) {
+	opacity: 0.5;
+	cursor: not-allowed !important;
+	pointer-events: none !important;
+}
+
+/* 允许表情按钮正常使用 */
+.disabled-editor :deep(.w-e-bar-item[data-title*='表情']),
+.disabled-editor :deep(.w-e-bar-item[data-title*='emotion']) {
+	opacity: 1 !important;
+	cursor: pointer !important;
+	pointer-events: auto !important;
+}
+
+/* 禁用编辑区域的所有操作（除了通过表情插入） */
+.disabled-editor :deep(.w-e-text-container) {
+	cursor: not-allowed;
+	user-select: text; /* 允许选择文本 */
+}
+
+/* 禁用所有菜单项，除了表情相关的 */
+.disabled-editor :deep(.w-e-menu-tooltip:not([data-title*='表情']):not([data-title*='emotion'])) {
+	opacity: 0.5 !important;
+	cursor: not-allowed !important;
+	pointer-events: none !important;
+}
+
+/* 允许表情菜单正常使用 */
+.disabled-editor :deep(.w-e-menu-tooltip[data-title*='表情']),
+.disabled-editor :deep(.w-e-menu-tooltip[data-title*='emotion']) {
+	opacity: 1 !important;
+	cursor: pointer !important;
+	pointer-events: auto !important;
+}
+</style>