![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/02\/20260201120519-697f417f1618a.png\")
<\/p>\n\u4f9d\u8d56\u5305：@wangeditor\/editor-for-vue@5.1.12<\/p>\n
\u5bcc\u6587\u672c\u7f16\u8f91\u5668\u662f\u73b0\u4ee3 Web \u5e94\u7528\u4e2d\u4e0d\u53ef\u6216\u7f3a\u7684\u7ec4\u4ef6，\u5c24\u5176\u5728 CMS\u3001\u535a\u5ba2\u3001\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf\u7b49\u573a\u666f\u4e2d\u5e7f\u6cdb\u4f7f\u7528\u3002\u672c\u6587\u5c06\u5e26\u4f60\u4e00\u6b65\u6b65\u5728 Vue 3 \u9879\u76ee\u4e2d\u96c6\u6210 WangEditor（\u56fd\u4ea7\u5f00\u6e90\u5bcc\u6587\u672c\u7f16\u8f91\u5668），\u5e76\u901a\u8fc7\u4e00\u4e2a\u5b8c\u6574\u7684 index.vue \u7ec4\u4ef6\u793a\u4f8b，\u8be6\u7ec6\u89e3\u6790\u5176\u914d\u7f6e\u9879\u3001\u4e8b\u4ef6\u5904\u7406\u3001\u56fe\u7247\u4e0a\u4f20\u3001\u8868\u683c\u652f\u6301\u53ca\u53ea\u8bfb\u6a21\u5f0f\u7b49\u9ad8\u7ea7\u529f\u80fd\u3002<\/p>\n
<\/p>\n
WangEditor \u662f\u4e00\u6b3e\u8f7b\u91cf\u3001\u6613\u7528\u3001\u4e2d\u6587\u6587\u6863\u5b8c\u5584\u7684\u56fd\u4ea7\u5bcc\u6587\u672c\u7f16\u8f91\u5668，\u5177\u6709\u4ee5\u4e0b\u4f18\u52bf：<\/p>\n
\u672c\u6587\u57fa\u4e8e @wangeditor\/editor-for-vue（v5+），\u9002\u7528\u4e8e Vue 3 Composition API\u3002<\/p>\n
npm install @wangeditor\/editor-for-vue @wangeditor\/editor<\/p>\n
\u6ce8\u610f：editor-for-vue \u662f Vue \u5c01\u88c5\u5c42，\u5e95\u5c42\u4ecd\u4f9d\u8d56 @wangeditor\/editor\u3002<\/p>\n
\u540c\u65f6\u5f15\u5165 CSS \u6837\u5f0f：<\/p>\n
import '@wangeditor\/editor\/dist\/css\/style.css'<\/p>\n
\u4ee5\u4e0b\u662f\u6211\u4eec\u5728\u9879\u76ee\u4e2d\u5c01\u88c5\u7684\u5bcc\u6587\u672c\u7ec4\u4ef6，\u652f\u6301\u5185\u5bb9\u4f20\u5165\u3001\u9ad8\u5ea6\u63a7\u5236\u3001\u53ea\u8bfb\u6a21\u5f0f\u3001\u56fe\u7247\u4e0a\u4f20\u3001\u8868\u683c\u64cd\u4f5c\u7b49\u3002<\/p>\n
<template>
\n <div style="border: 1px solid #ccc">
\n <!– \u5de5\u5177\u680f –>
\n <Toolbar
\n v-if="showToolbarFlag"
\n :editor="editorRef"
\n :defaultConfig="toolbarConfig"
\n :mode="mode"
\n style="border-bottom: 1px solid #ccc"
\n \/>
\n <!– \u7f16\u8f91\u5668\u4e3b\u4f53 –>
\n <Editor
\n v-model="valueHtml"
\n :defaultConfig="editorConfig"
\n :mode="mode"
\n @onCreated="handleCreated"
\n @onChange="handleChange"
\n :style="{ height: editorHeight, overflowY: 'hidden' }"
\n :readOnly="readOnlyFlag"
\n \/>
\n <\/div>
\n<\/template><\/p>\n
import { Editor, Toolbar } from '@wangeditor\/editor-for-vue'
\nimport '@wangeditor\/editor\/dist\/css\/style.css'
\nimport base from "@\/utils\/base.js"<\/p>\n
const props = defineProps({
\n content: { type: String, default: '' },
\n showToolbarFlag: { type: Boolean, default: true },
\n editorHeight: { type: String, default: '500px' },
\n readOnlyFlag: { type: Boolean, default: false }
\n})<\/p>\n
const emit = defineEmits(['update'])<\/p>\n
const mode = ref('default')
\nconst editorRef = shallowRef() \/\/ \u5fc5\u987b\u7528 shallowRef，\u907f\u514d Vue \u6df1\u5ea6\u8ffd\u8e2a
\nconst valueHtml = ref('')<\/p>\n
\u26a0\ufe0f \u6ce8\u610f：editorRef \u5fc5\u987b\u4f7f\u7528 shallowRef，\u56e0\u4e3a\u7f16\u8f91\u5668\u5b9e\u4f8b\u5305\u542b\u5927\u91cf\u975e\u54cd\u5e94\u5f0f\u5c5e\u6027，\u6df1\u5ea6\u54cd\u5e94\u4f1a\u5bfc\u81f4\u6027\u80fd\u95ee\u9898\u751a\u81f3\u62a5\u9519\u3002<\/p>\n
const editorConfig = {
\n placeholder: '\u8bf7\u8f93\u5165\u5185\u5bb9,\u5355\u4e2a\u6587\u4ef6\u7684\u6700\u592710MB…',
\n MENU_CONF: {
\n \/\/ \u8868\u683c\u914d\u7f6e
\n insertTable: {
\n withBorder: true,
\n maxRow: 10,
\n maxCol: 6,
\n onInserted(tableNode) {
\n console.log('\u63d2\u5165\u7684\u8868\u683c:', tableNode)
\n }
\n },
\n \/\/ \u8868\u683c\u60ac\u505c\u5de5\u5177\u680f\u81ea\u5b9a\u4e49
\n hoverbarKeys: {
\n table: {
\n menuKeys: [
\n 'tableHeader',
\n 'insertTableRow', 'deleteTableRow',
\n 'insertTableCol', 'deleteTableCol',
\n 'deleteTable'
\n ]
\n }
\n }
\n }
\n}<\/p>\n
editorConfig.MENU_CONF['uploadImage'] = {
\n fieldName: 'file', \/\/ \u540e\u7aef\u63a5\u6536\u7684\u5b57\u6bb5\u540d
\n server: `${base.baseUrl}${base.project}\/admin\/oss\/upload`,
\n maxFileSize: 10 * 1024 * 1024, \/\/ 10MB
\n maxNumberOfFiles: 10,
\n allowedFileTypes: ['image\/*'],
\n timeout: 10000,
\n meta: {
\n token: sessionStorage.getItem("token") \/\/ \u643a\u5e26\u8ba4\u8bc1\u4fe1\u606f
\n },
\n \/\/ \u81ea\u5b9a\u4e49\u63d2\u5165\u903b\u8f91
\n customInsert(res, insertFn, file) {
\n \/\/ \u5047\u8bbe\u540e\u7aef\u8fd4\u56de { url: 'https:\/\/xxx.jpg' }
\n insertFn(res.url, res.url, res.url)
\n },
\n onFailed(file, res) {
\n console.log(`${file.name} \u4e0a\u4f20\u5931\u8d25`, res)
\n }
\n}<\/p>\n
\u2705 \u5173\u952e\u70b9：<\/p>\n
const handleCreated = (editor) => {
\n editorRef.value = editor
\n if (props.readOnlyFlag) {
\n editor.disable() \/\/ \u771f\u6b63\u7684\u53ea\u8bfb（\u6bd4 :readOnly \u66f4\u53ef\u9760）
\n } else {
\n editor.enable()
\n }
\n}<\/p>\n
📌 \u63a8\u8350\u4f7f\u7528 editor.disable() \u800c\u975e :readOnly \u5c5e\u6027，\u540e\u8005\u5728\u67d0\u4e9b\u7248\u672c\u4e2d\u53ef\u80fd\u5931\u6548\u3002<\/p>\n
const handleChange = () => {
\n valueHtml.value = editorRef.value.getHtml()
\n emit('update', valueHtml.value)
\n}<\/p>\n
watch(() => props.content, (newVal) => {
\n nextTick(() => {
\n if (editorRef.value) {
\n editorRef.value.setHtml(newVal)
\n valueHTML.value = newVal
\n }
\n })
\n})<\/p>\n
💡 \u4f7f\u7528 nextTick \u786e\u4fdd DOM \u66f4\u65b0\u540e\u518d\u64cd\u4f5c\u7f16\u8f91\u5668\u3002<\/p>\n
onMounted(async () => {
\n await nextTick()
\n setTimeout(() => {
\n if (props.content && editorRef.value) {
\n try {
\n editorRef.value.setHtml(props.content)
\n } catch (error) {
\n \/\/ \u9632\u6b62\u975e\u6cd5 HTML（\u5982\u672a\u95ed\u5408\u6807\u7b7e）\u5bfc\u81f4\u5d29\u6e83
\n const cleanHtml = props.content.replace(\/<table[^>]*>.*?<\\\\\/table>\/gis, '')
\n editorRef.value.setHtml(cleanHtml || '<p><\/p>')
\n }
\n }
\n }, 100)
\n})<\/p>\n
\u2705 \u52a0\u5165 try-catch \u548c\u8868\u683c\u6e05\u7406，\u63d0\u5347\u9c81\u68d2\u6027\u3002<\/p>\n
onBeforeUnmount(() => {
\n editorRef.value?.destroy()
\n})<\/p>\n
<style scoped>
\n.w-e-table {
\n border-collapse: collapse;
\n width: 100%;
\n margin: 10px 0;
\n}
\n.w-e-table td, .w-e-table th {
\n border: 1px solid #ddd;
\n padding: 8px;
\n min-width: 50px;
\n height: 20px;
\n vertical-align: top;
\n}
\n.w-e-table th {
\n background-color: #f2f2f2;
\n text-align: left;
\n}
\n<\/style><\/p>\n
WangEditor \u7684\u8868\u683c\u9ed8\u8ba4\u6837\u5f0f\u8f83\u7b80\u964b，\u53ef\u901a\u8fc7\u8986\u76d6 .w-e-table \u7c7b\u8fdb\u884c\u7f8e\u5316\u3002<\/p>\n
<template>
\n <RichTextEditor
\n :content="article.content"
\n @update="handleContentUpdate"
\n :editorHeight="'400px'"
\n :readOnlyFlag="isPreviewMode"
\n \/>
\n<\/template><\/p>\n
<script setup>
\nconst article = reactive({ content: '<p>\u521d\u59cb\u5185\u5bb9<\/p>' })
\nconst handleContentUpdate = (html) => {
\n article.content = html
\n}
\nconst isPreviewMode = false
\n<\/script><\/p>\n
| \u7f16\u8f91\u5668\u5185\u5bb9\u4e0d\u66f4\u65b0<\/td>\n | \u786e\u4fdd\u4f7f\u7528 editor.setHtml() \u800c\u975e\u76f4\u63a5\u8d4b\u503c v-model<\/td>\n<\/tr>\n |
| \u56fe\u7247\u4e0a\u4f20 401<\/td>\n | \u68c0\u67e5 meta \u662f\u5426\u643a\u5e26\u6709\u6548 token<\/td>\n<\/tr>\n |
| \u8868\u683c\u6837\u5f0f\u9519\u4e71<\/td>\n | \u8986\u76d6 .w-e-table \u6837\u5f0f，\u8bbe\u7f6e border-collapse<\/td>\n<\/tr>\n |
| \u521d\u59cb\u5316\u7a7a\u767d<\/td>\n | \u4f7f\u7528 setTimeout \u5ef6\u8fdf 100ms \u8bbe\u7f6e\u5185\u5bb9<\/td>\n<\/tr>\n |
| \u5185\u5b58\u6cc4\u6f0f<\/td>\n | \u52a1\u5fc5\u5728 onBeforeUnmount \u4e2d\u8c03\u7528 destroy()<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n \n \u516d\u3001\u603b\u7ed3<\/h3>\n\u901a\u8fc7\u672c\u6587\u7684 index.vue \u7ec4\u4ef6，\u6211\u4eec\u5b9e\u73b0\u4e86：<\/p>\n
|