wangEditor

介绍

wangEditor 是一款开源 Web 富文本编辑器，开箱即用，配置简单。支持 JS、 Vue、 React 等。 官网地址：https://www.wangeditor.com/ (opens new window)
本项目中使用版本为 v4+，目前新版 v5+ 已发布。

技术点

在 vue 中使用 自定义菜单 插入自定义内容 图片上传

在 vue 中使用

安装（wangEditor 有 Vue 版安装包可直接使用，本项目中使用非 Vue 封装版本）

npm install wangeditor --save

html 结构

<div id="editor"></div>

使用

import E from "wangeditor"
const editor = new E("#editor")
editor.create()

自定义菜单

const { $, BtnMenu } = E;

// 增加添加 影视/影人/角色 等引用按钮
class InsertCardMenu extends BtnMenu {
  constructor(editor) {
    const $elem = E.$(
      `<div class="w-e-menu">
        <i class="iconfont icon-card"></i>
      </div>`
    );
    super($elem, editor);
  }

  // 菜单点击事件
  clickHandler() {
    _this.showCardSearchModal();
  }

  // 菜单激活状态
  tryChangeActive() {}
}

// 注册菜单
editor.menus.extend("card", InsertCardMenu);

// 配置菜单
editor.config.menus = [
  "card",
]

插入自定义内容

const html = "<p>...</p>"
this.editor.cmd.do("insertHTML", html);

图片上传