富文本的使用 [wangEditor5]

1.安装

npm install @wangeditor/editor --save
//安装 Vue2 组件(可选)
npm install @wangeditor/editor-for-vue --save

2.引用

2.1 js部分

注册组件

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
           editor: null, //富文本对象
          html: '', //富文本中的内容 通过v-model 进行数据绑定
          toolbarConfig: {},
          editorConfig: {
            placeholder: '请输入内容23...',
            MENU_CONF: {
              uploadImage: {
                server: 'http://192.168.0.88:8888/api/private/v1/upload', //图片上传的地址
          },
        },
      }, //编译器的配置，输入提示、图片上传
      mode: 'default', // or 'simple'  输入的内容选中时可以操作
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>

2.2 html 部分

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

2.3 Css部分

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