热力上图功能BUG处理
This commit is contained in:
parent
1010549f04
commit
93ea360421
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue