热力上图功能BUG处理

Dkl-vue3-ui-DP/src/components/WangEditor.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="wang-editor-container">
+    <Toolbar
+      class="editor-toolbar"
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+    />
+    <Editor
+      class="editor-content"
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :style="{ height: `${height}px` }"
+      :mode="mode"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, shallowRef, watch, onBeforeUnmount, onMounted } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  height: {
+    type: Number,
+    default: 400
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const mode = ref('default') // 或 'simple'
+const editorRef = shallowRef()
+const valueHtml = ref(props.modelValue)
+
+// 完整的工具栏配置
+const toolbarConfig = {
+  excludeKeys: [
+    'group-image',  // 排除图片
+    'group-video',  // 排除视频
+    'emotion',     // 排除表情
+    'insertImage',
+    'uploadImage'
+  ],
+  insertKeys: {
+    index: 25,  // 插入位置
+    keys: [
+      'insertTable', // 确保表格按钮存在
+    ]
+  }
+}
+
+// 编辑器配置
+const editorConfig = ref({
+  placeholder: '请输入内容...',
+  scroll: true,
+  MENU_CONF: {
+    insertTable: {
+      maxRow: 10,
+      maxCol: 6,
+      // 自定义表格样式
+      tableCellStyle: {
+        border: '1px solid #ddd',
+        padding: '8px',
+        minWidth: '50px'
+      },
+      tableHeaderCellStyle: {
+        backgroundColor: '#f2f2f2',
+        border: '1px solid #ddd',
+        padding: '8px'
+      }
+    }
+  },
+  hoverbarKeys: {
+    table: {
+      menuKeys: [
+        'tableHeader',
+        'insertTableRow',
+        'deleteTableRow',
+        'insertTableCol',
+        'deleteTableCol',
+        'deleteTable'
+      ]
+    }
+  }
+})
+
+const handleCreated = (editor) => {
+  editorRef.value = editor
+  // 强制刷新工具栏
+  nextTick(() => {
+    editor.getToolbar().updateAllToolbar()
+  })
+}
+
+// 确保在组件挂载后初始化
+onMounted(() => {
+  if (editorRef.value) {
+    editorRef.value.getToolbar().updateAllToolbar()
+  }
+})
+
+watch(valueHtml, (newVal) => {
+  emit('update:modelValue', newVal)
+})
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal !== valueHtml.value) {
+    valueHtml.value = newVal
+  }
+})
+
+onBeforeUnmount(() => {
+  if (editorRef.value) {
+    editorRef.value.destroy()
+  }
+})
+
+defineExpose({
+  getEditor: () => editorRef.value
+})
+</script>
+
+<style>
+/* 必须引入的样式 */
+@import '@wangeditor/editor/dist/css/style.css';
+
+.wang-editor-container {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.editor-toolbar {
+  border-bottom: 1px solid #dcdfe6 !important;
+  background-color: #f8f8f8 !important;
+  padding: 0 10px !important;
+}
+
+.editor-content {
+  padding: 10px 15px !important;
+  background-color: #fff !important;
+}
+
+/* 表格样式增强 */
+.w-e-text table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.w-e-text table td,
+.w-e-text table th {
+  border: 1px solid #ddd !important;
+  padding: 8px !important;
+  min-width: 50px !important;
+}
+
+.w-e-text table th {
+  background-color: #f2f2f2 !important;
+}
+
+/* 暗黑模式适配 */
+[data-theme='dark'] .w-e-text table th {
+  background-color: #333 !important;
+  border-color: #444 !important;
+}
+
+/* 确保工具栏按钮可点击 */
+.w-e-bar .w-e-menu {
+  cursor: pointer !important;
+  opacity: 1 !important;
+}
+
+/* 移除不需要的按钮 */
+.w-e-bar [data-menu-key="uploadImage"],
+.w-e-bar [data-menu-key="insertImage"],
+.w-e-bar [data-menu-key="uploadVideo"],
+.w-e-bar [data-menu-key="insertVideo"],
+.w-e-bar [data-menu-key="emotion"] {
+  display: none !important;
+}
+</style>