wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor
image.png
以上内容摘自https://www.kancloud.cn/wangfupeng/wangeditor3/332599
以下是项目实战项目的部分截图
在做好布局后可使编辑器自适应
第一步：下载相关js文件，引入项目
<script src="lib/editor/wangEditor.min.js"></script>
<!-- 全屏功能需要调用的js -->
<script src="lib/editor/wangEditor-fullscreen-plugin.js"></script>
第二步：初始化自己的编辑器
let E = window.wangEditor;
let editor2 = new E('#div3');
editor2.create();
这样就在id为div3的层中建好了自己的编辑器。
第三步：使用一些官方提供的配置及方法
// 监控变化，同步更新到表单数据
editor2.customConfig.onchange = (html) => {
console.log(`获取到的富文本数据:${html}`);
};
//配置onfocus函数之后，用户点击富文本区域会触发onfocus函数执行。
editor2.customConfig.onfocus = () => {
console.log('focus');
};
// 自定义菜单配置(注释或删掉不需要的顶部菜单)
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
// 'fontName', // 字体
// 'italic', // 斜体
// 'underline', // 下划线
// 'strikeThrough', // 删除线
// 'foreColor', // 文字颜色
// 'backColor', // 背景颜色
'list', // 列表
'justify', // 对齐方式
// 'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
// 'table', // 表格
'undo', // 撤销
'redo' // 重复
];
//需要的话可以加入全屏功能，同样是传入要存放编辑器的层#div3，一行代码就搞定了，很方便
E.fullscreen.init('#div3');
编辑器的一些方法
