修复富文本

src/components/editor/index.vue

@@ -102,6 +102,44 @@ export default defineComponent({
 			}
 		};
 
+		// 应用禁用状态（只保留表情）
+		const applyDisableState = () => {
+			if (!state.editorToolbar || !props.disableExceptEmotion) return;
+
+			nextTick(() => {
+				// 获取所有工具栏按钮容器
+				const toolbarItems = state.editorToolbar!.querySelectorAll('.w-e-bar-item');
+				toolbarItems.forEach((item: Element) => {
+					// 尝试找到按钮上的 tooltip
+					const button = item.querySelector('button');
+					let isEmotionButton = false;
+					
+					if (button) {
+						// 检查 data-tooltip (新版) 或 data-title (旧版)
+						const tooltip = button.getAttribute('data-tooltip') || button.getAttribute('data-title') || '';
+						// 也检查svg或者特定的class，如果有的话。通常表情按钮会有特定的icon
+						// 这里主要依靠 tooltip 文字匹配
+						if (tooltip.includes('表情') || tooltip.toLowerCase().includes('emotion')) {
+							isEmotionButton = true;
+						}
+					}
+					
+					// 也可以尝试检查 menu key，但这通常不在 DOM 上直接体现，除非自己加了属性
+					// 下面是一个补充策略：如果 item 内部有 emoji 的 svg 或者特定的结构
+					
+					if (!isEmotionButton) {
+						(item as HTMLElement).style.opacity = '0.4';
+						(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';
+					}
+				});
+			});
+		};
+
 		// 初始化富文本
 		const initWangeditor = () => {
 			destroyEditor();
@@ -124,35 +162,11 @@ 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';
-						}
-					}
-				});
+				
+				// 如果开启了特殊禁用模式，应用样式
+				if (props.disableExceptEmotion) {
+					applyDisableState();
+				}
 			});
 		};
 
@@ -192,10 +206,11 @@ export default defineComponent({
 		// 监听禁用除表情外的状态变化
 		watch(
 			() => props.disableExceptEmotion,
-			(disabled) => {
-				if (state.editor && state.isInitialized) {
-					applyDisableState();
-				}
+			(val) => {
+				// 重新初始化或者直接应用样式
+				// 为了稳妥，重新初始化以确保工具栏状态正确
+				// 但也可以只调用 applyDisableState 如果只是切换禁用状态
+				initWangeditor();
 			}
 		);
 
@@ -211,39 +226,20 @@ export default defineComponent({
 	position: relative;
 }
 
-/* 禁用除表情外的所有工具栏按钮 */
-.disabled-editor :deep(.w-e-bar-item) {
-	opacity: 0.5;
-	cursor: not-allowed !important;
-	pointer-events: none !important;
+/* 仅在“只保留表情”模式下应用边框和样式修正 */
+.disabled-editor {
+	border: 1px solid #dcdfe6;
+	border-radius: 4px;
 }
 
-/* 允许表情按钮正常使用 */
-.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-toolbar) {
+	border-bottom: 1px solid #dcdfe6;
+	background-color: #f5f7fa;
+	border-radius: 4px 4px 0 0;
 }
 
-/* 禁用编辑区域的所有操作（除了通过表情插入） */
 .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;
+	border-radius: 0 0 4px 4px;
+	background-color: #fff;
 }
 </style>