SxsnPC/src/components/editor/index.vue

<template>
<div class="wangeditor-wrapper">
    <div ref="toolbarContainer" class="toolbar-container"></div>
    <div ref="editorContainer" class="editor-container"></div>
</div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar } from '@wangeditor/editor'
import Cookies from 'js-cookie'

export default {
    name: 'EditorVue',
    props: {
        content: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            editor: null,
            toolbar: null
        }
    },
    watch: {
        content(newVal) {
            // 外部 prop 变化(异步加载详情)才回填,避免输入过程中光标跳动与循环触发
            if (this.editor && newVal !== this.editor.getHtml()) {
                this.editor.setHtml(newVal || '')
            }
        }
    },
    mounted() {
        this._createEditor()
    },
    beforeDestroy() {
        this._destroyEditor()
    },
    methods: {
        // 父组件 ref 调用的初始化入口(对齐老 Quill 实现的 init() 行为)
        init() {
            this._destroyEditor()
            this._createEditor()
        },
        _destroyEditor() {
            if (this.editor) {
                this.editor.destroy()
                this.editor = null
            }
            if (this.toolbar) {
                this.toolbar.destroy()
                this.toolbar = null
            }
        },
        _createEditor() {
            const editorConfig = {
                html: this.content || '',
                placeholder: '请在这里输入',
                readOnly: false,
                autoFocus: false,
                MENU_CONF: {
                    uploadImage: {
                        // 沿用项目原有的 OSS 上传端点,token 走 URL 参数
                        server: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token') || ''}`,
                        fieldName: 'file',
                        // 后端响应是项目老格式 { code: 0, data: 'url', msg: '...' },
                        // wangEditor 默认期望 { errno, data: [{ url, alt, href }] },这里桥接一下
                        customInsert(res, insertFn) {
                            if (res && res.code === 0 && res.data) {
                                insertFn(res.data, '', res.data)
                            }
                        }
                    },
                    fontFamily: {
                        fontFamilyList: [
                            { name: '宋体', value: 'SimSun' },
                            { name: '黑体', value: 'SimHei' },
                            { name: '微软雅黑', value: 'Microsoft YaHei' },
                            { name: '楷体', value: 'KaiTi' },
                            { name: '仿宋', value: 'FangSong' },
                            { name: 'Arial', value: 'Arial' }
                        ]
                    }
                },
                onChange: (editor) => {
                    this.$emit('EditorChange', editor.getHtml())
                }
            }

            this.editor = createEditor({
                selector: this.$refs.editorContainer,
                config: editorConfig,
                mode: 'default'
            })

            const toolbarConfig = {
                toolbarKeys: [
                    'undo', 'redo',
                    '|',
                    'headerSelect',
                    'bold', 'italic', 'underline', 'strikeThrough',
                    '|',
                    'color', 'bgColor',
                    '|',
                    'fontSize', 'fontFamily',
                    'lineHeight',
                    '|',
                    'justifyLeft', 'justifyCenter', 'justifyRight',
                    '|',
                    'bulletedList', 'numberedList',
                    'indent',
                    '|',
                    'insertLink', 'uploadImage',
                    'blockquote', 'codeBlock',
                    '|',
                    'divider', 'splitLine'
                ]
            }

            this.toolbar = createToolbar({
                editor: this.editor,
                selector: this.$refs.toolbarContainer,
                config: toolbarConfig,
                mode: 'default'
            })
        }
    }
}
</script>

<style>
.wangeditor-wrapper {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
}
.wangeditor-wrapper .toolbar-container {
    border-bottom: 1px solid #dcdfe6;
}
.wangeditor-wrapper .editor-container {
    min-height: 600px;
    height: auto !important;
}
</style>