PC/移动端的富文本编辑器wangEditor的使用

在刚开发的项目之中，在移动端/PC端，需要一个富文本编辑器，要求：简单-轻量-实用。比较了几种编辑器后，选择了wangEditor。
移动端的截图（手机效果好些）：

image.png

PC端的截图：

image.png ；

在wangEditor的官网（http://www.wangeditor.com/）中，提供了一些常用的工具，可以按需来配置，还可以自己二次封装：

image.png
。

先说配置：在PC端直接映入 wangEditor.js来创建，在移动端用的vue.js模块开发，所以用的：npm install wangeditor来安装。

其次，按需配置：先说PC端：在确保引入wangEditor.js之后，在之后的js中，写入：
var E = window.wangEditor;
var editor = new E('#editor');
editor.create()；//就创建好了编辑器
//说说里面的配置，PC端常用的未以下这些
// 自定义菜单配置---选中你想要的来配置，
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'undo', // 撤销
];
//插入链接
editor.customConfig.linkCheck = function (text, link) {
console.log(text) // 插入的文字
console.log(link) // 插入的链接
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串，即校验失败的提示信息
};
//处理图片，我用的是自定义的方式来选图，
//如果想完全自己控制图片上传的过程，可以使用如下代码
editor.customConfig.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后，插入到编辑器的方法

// 上传代码返回结果之后，将图片插入到编辑器中
insert(imgUrl)

}

先说移动端：因为我用的vue，所以直接用git 下载了源码来做操作：

1. git clone git@github.com:wangfupeng1988/wangEditor.git
2. 运行npm install && npm run dev查看在 vue 中的效果（http://localhost:8080/）

想要自己改变以写样式，应该直接在wangEditor.js找到要修改的主题，如：

image.png

，这样你的编辑器就基本ok了。