wangEditor富文本

1、富文本组件

<template>
    <div>
        <Toolbar
            style="border: 1px solid #ccc; border-bottom: 0"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 400px; overflow-y: hidden;border: 1px solid #ccc"
            v-model="content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>

<script>
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {getEditorConfig} from "@/assets/js/editorConfig";
export default {
    name: "wangEditor",
    components: {Editor, Toolbar},
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    watch: {
        value: {
            handler(newValue, oldValue) {
                this.content = newValue
            }
        }
    },
    data() {
        return {
            editor: null,
            toolbarConfig: {},
            editorConfig: getEditorConfig(),
            mode: 'default', // or 'simple',
            content: this.value
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        getValue() {
            if (this.editor.getText().trim()) {
                return this.content
            } else {
                return null
            }
        }
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

2、使用

import wangEditor from "@/components/wangEditor.vue";
components: {
     wangEditor
},
<wangEditor ref="editor" :value="form.describe"></wangEditor>

3、提交时候获取值

this.form.noticeContent = this.$refs.editor.getValue()