富文本编辑器wangEditor的基本使用

首先，为大家献上原地址链接    wangEditor，如果要更深层的去使用，可以去看里面的高级功能，好的。不多说了，开始使用，项目还是老套的vue2,先去使用npm去下载编辑器

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

 然后创建一个js文件，随便叫啥名字即可，我的文件名称是config.js,下面就是代码

// class MySelectMenu implements ISelectMenu {   // TS 语法
class MySelectMenu {
    // JS 语法
    constructor() {
        this.title = '插入域'
        this.tag = 'select'
        this.selectPanelWidth = 200
    }
    // 下拉框的选项
    // getOptions(editor: IDomEditor) {   // TS 语法
    getOptions(editor) {
        // JS 语法
        const options = [
            {
                value: '插入域', text: '插入域',
                selected: true
            }
        ]
        const { insertField = [] } = editor.getMenuConfig('insertField')
        insertField.forEach((item) => {
            const { text, value } = item
            options.push({
                text,
                value
            })
        })
        return options
    }
    // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
    // isActive(editor: IDomEditor): boolean {    // TS 语法
    isActive(editor) {
        // JS 语法
        return false
    }
    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
    // getValue(editor: IDomEditor): string | boolean {    // TS 语法
    getValue(editor) {
        return '插入域'
    }
    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
    // isDisabled(editor: IDomEditor): boolean {   // TS 语法
    isDisabled(editor) { // JS 语法
        // console.log('this.getOptions.length==1',this.getOptions(editor).length==1);
        // console.log('this.getOptions.length',this.getOptions(editor));
        if (this.getOptions(editor).length == 1) return true
        //  插入域无其他设置内容则禁用

        return false
    }
    // 点击菜单时触发的函数
    // exec(editor: IDomEditor, value: string | boolean) {   // TS 语法
    exec(editor, value) {
        // JS 语法
        // Select menu ，这个函数不用写，空着即可
        if (value != '插入域') {
            const innerHTML = `<span style="color: rgb(54, 88, 226);"><strong>#${value}#</strong></span>`
            editor.dangerouslyInsertHtml(innerHTML)
        }
    }
}

function getinsertField() {
    const insertField = []
    return insertField
}

const insertField1Conf = {
    key: 'insertField', // 定义 menu key ：要保证唯一、不重复（重要）
    factory() {
        return new MySelectMenu() // 把 `YourMenuClass` 替换为你菜单的 class
    },
    // 默认的菜单菜单配置，将存储在 editorConfig.MENU_CONF[key] 中
    // 创建编辑器时，可通过 editorConfig.MENU_CONF[key] = {...} 来修改
    config: {
        insertField: getinsertField()
    }
}

export default insertField1Conf

官网上面是有教怎么使用的，如果用的是js就是我写的这种，ts的话官网也有，记得看清楚，否则会报错

然后就是vue的页面使用

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig" :mode="mode" />
    <Editor v-model="html" style="height: 500px; overflow-y: hidden" :default-config="editorConfig" :mode="mode" @onCreated="onCreated" />
    <el-button type="primary" icon="el-icon-upload2" plain @click="save()">保存</el-button>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import insertField1Conf from '@/config'
import { Boot } from '@wangeditor/editor'
Boot.registerMenu(insertField1Conf) // 注册插入域菜单
export default {
  components: { Editor, Toolbar },
  props: {
    insertField: {
      type: Array,
      default: () => [
        { value: '标题1', text: '标题1' },
        { value: '标题2', text: '标题2' },
        { value: '标题3', text: '标题3' }
      ]
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        insertKeys: {
          index: 0, // 插入的位置，基于当前的 toolbarKeys
          keys: ['|', 'insertField', '|']
        }
      },
      editorConfig: {
        placeholder: '"请输入内容..."',
        MENU_CONF: {
          insertField: {
            insertField: [...this.insertField] // 设置插入域内容
          }
        }
      },
      mode: 'default' // or 'simple'
    }
  },
  watch: {
    insertField: {
      deep: true
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  mounted() {},
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    save() {
      console.log(this.editor.getText())
      console.log(this.editor.getHtml())
      console.log(this.editor.getFragment())
      console.log(this.html)
    }
  }
}
</script>

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

这里面我是没有全局注入，因为富文本编辑器用的地方也不多，没必要全局注入，有需要的便宜也可以自行封装，上面是简单的封装标题的一些小功能，这里面Boot.registerMenu(insertField1Conf)是单独引入，官网上面也有多个引入的方法，可以去官网直接cv,然后效果图如下

 后面按钮是我自己测试的一些事件，值得说的是

      console.log(this.editor.getHtml())

      console.log(this.html)这二个事件打印的结果都是html，所以都可以使用，这里就这些，祝大家遇到问题都能及时得到解决