富文本-wangEditor

date: 2020-10-15 16:46:12 tags: vue

安装

$ npm i wangeditor --save

使用

import E from 'wangeditor'


/**
 * 初始化富文本
 */
this.editor = new E('#editorElem'); // 富文本编译器容器div > editorElem


/**
 * 设置菜单
 */
this.editor.config.menus = [
  'head',
  'bold',
  'fontSize',
  'fontName',
  'italic',
  'underline',
  'strikeThrough',
  'indent',
  'lineHeight',
  'foreColor',
  'backColor',
  'link',
  'list',
  'justify',
  'quote', 
  'emoticon',
  'image',
  'video',
  'table',
  'code',
  'splitLine',
  'undo',
  'redo',
]


/**
 * 扩展菜单
 */
const { $ } = E
const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E.menuConstructors
class Husky extends DropListMenu {
  constructor (editor) {
    const $elem = $('<div class="w-e-menu"><div style="color:#409EFF;">变量</div></div>')
    // droplist 配置
    const dropListConf = {
      width: 140,
      title: '选择变量',
      type: 'list',
      list: [
        { $elem: $('<div style="line-height: 20px;">用户名</div>'), value: '{{&&user.name}}' },
        { $elem: $('<div style="line-height: 20px;">密码</div>'), value: '{{&&user.pwd}}' },
      ],
      // droplist 每个 item 的点击事件
      clickHandler: (value) => {
        // value 参数即 dropListConf.list 中配置的 value
        this.command(value)
      },
    }
    super($elem, editor, dropListConf)
  }

  command(value) {
    // 设置标题
    this.editor.cmd.do('formatBlock', value);
    // 插入内容
    this.editor.cmd.do('insertHTML', value)
  }

  // 菜单是否需要激活
  tryChangeActive() {
    const reg = /^h/i
    const cmdValue = this.editor.cmd.queryCommandValue('formatBlock')
    if (reg.test(cmdValue)) {
      // 选区处于标题内，激活菜单
      this.active()
    } else {
      // 否则，取消激活
      this.unActive()
    }
  }
}
// 插入自定义菜单
this.editor.menus.extend('Husky', Husky)


/**
 * 图片上传 - 配置服务器端地址
 */
this.editor.config.uploadImgHeaders = {
  'Access-Token': this.$init.token.accessToken
}
this.editor.config.uploadImgServer = '图片上传地址';
this.editor.config.uploadFileName = 'file'
this.editor.config.uploadImgMaxLength = 1;
this.editor.config.zIndex = 80;
this.editor.config.uploadImgHooks = {
  // 上传成功处理
  customInsert: function (insertImg, result, editor) {
    var url = result.result.fileUrl; // 图片地址
    insertImg(url)
  }
}
this.editor.config.onchange = (html) => {
  vm.editorContent = html
}


/**
 * 富文本编译器创建
 */
this.editor.create()