wangEditor 5

开源 Web 富文本编辑器，开箱即用，配置简单

简洁易用，功能强大

快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。在 Vue React 也可以快速接入。

支持 JS Vue React

不依赖任何第三方框架，可用于 jQuery Vue React 等。wangEditor 提供了官方的 Vue React 组件。

兼容性

• 兼容主流的 PC 浏览器，如 Chrome Firefox Safari Edge 等
• 暂不支持移动端编辑（支持移动端查看）
• 不再支持 IE 浏览器

安装

npm 安装 editor

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

安装 React 组件(可选)

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

安装 Vue2 组件(可选)

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

安装 Vue3 组件(可选)

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

CDN

<!-- 引入 css -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">

<!-- 引入 js -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
    var E = window.wangEditor; // 全局变量
</script>

如果上述 CDN 访问不成功，可以在 npm 安装完成之后，在安装包找到 JS CSS 文件，步骤如下：

• 新建一个 test1 文件夹，打开控制台，目录定位到该文件夹，执行 npm install @wangeditor/editor 或 yarn add @wangeditor/editor
• 安装完成，打开 node_modules/@wangeditor/editor/dist 文件夹，即可找到 JS CSS 文件：
  • index.js
  • css/style.css
• 把这俩文件拷贝出来，然后删掉 test1 文件夹

接下来

要实现一个完整的富文本编辑器功能，你可能还需要以下功能：

• 内容处理 - 获取内容，设置内容，展示内容
• 工具栏配置 - 插入新菜单，屏蔽某个菜单等
• 编辑器配置 - 兼听各个生命周期，自定义粘贴
• 菜单配置 - 配置颜色、字体、字号、链接校验、上传图片、上传视频等
• 编辑器 API - 控制编辑器内容和选区
• 扩展新功能 - 扩展菜单、元素、插件等