wangEditor富文本编辑器入门（富文本编辑工具）

wangEditor是一款轻量级的web富文本编辑器。国产，基于javascript和css开发的web富文本编辑器，开源免费，上传图片可以控制尺寸。重点在于它轻量，如果需要的功能不是很复杂，用它还是不错的以下是它的部分功能，

详情请往下看：

1.wangEditor优势

• 基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用
• WangEditor富文本编辑器配置方便、使用简单、且开源免费
• 各项基本配置基本齐全，适合功能需求简单的项目构建
• 兼容性是支持IE10+的浏览器【】
• 默认正文p、字体样式以span标签的行内样式添加

2. 功能介绍

下图是基本也是全部的功能点（从左到右）

包括：【标题设置、字体加粗、斜体、下划线、删除、文字颜色、背景颜色、链接、列表（有序、无序）、表情、图片（网络图片、本地上传）、表格、视频、代码块、返回上一步、返回下一步（但其实ctrl+z快捷键也可以）】

3. 使用

1、引入编辑器（多种引入方式）、

包管理工具例如node下载

o npm install wangeditor

o bower install wangEditor

下载源文件js引入（ https://github.com/wangfupeng1988/wangEditor/releases）

o <script src="/static/assets/plugins/wangEditor/wangEditor.min.js"></script>

2、使用编辑器

(1) 创建容器

(2) 创建并且实例化组件

(3) 基础配置

(4) 常用功能设置

(5) 关于本地上传图片

编辑器自带图片上传的上传的网站链接图片

本地上传图片需要自己设置

(6) 其他

3、结语：

wangEditor是一个功能非常丰富且功能强大的软件，适配性非常强可塑性也非常强大，就看怎么去使用，在此仅代表自己对于大佬的崇高敬意！！！

wangEditor5 新版已经正式发布了 ，大概看了下官方文档，新手超级友好，也更加适应框架特性，还有相应的react和vue组件

react组件 @wangeditor/editor-for-react、vue组件 @wangeditor/editor-for-vue

新编辑器加了两种mode，default 默认模式 - 集成了 wangEditor 所有功能，simple 简洁模式 - 仅有部分常见功能，简洁易用