最近想做一个新闻后台管理系统，需要富文本编辑器编辑新闻内容然后上传，查询了许多的编辑器，最后选择wangEditor3。本人认为它的界面很漂亮，同时可以满足我的基本要求。接下来，我会分享这款插件的一些简单使用，大家也可以直接参考官网的文档，直接点击wangEditor3官方在线开发文档进入，或者感兴趣的可以直接下载wangEditor3源码进行研究。后面几篇文章会分享它如何上传图片以及提交表单如何删除服务器中多余的图片。
首先简单介绍以下这款插件的特点。wangEditor是基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。
源码：GitHub - wangfupeng1988/wangEditor: wangEditor —— 轻量级web富文本框
1、wangEditor3下载
官方文档介绍了四种下载的方式，分别是：
直接下载：https://github.com/wangfupeng1988/wangEditor/releases
使用npm下载：npm install wangeditor（注意wangeditor全部是小写字母）
使用bower下载：bower install wangEditor（前提保证电脑已安装了bower）
使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js
我选择的是直接在gitHub上下载最新版的wangEditor3，解压，进入release文件夹下找到wangEditor.js或者wangEditor.min.js，复制到放javascript文件的文件夹里面，引用该js文件
2、创建一个编辑器
代码示例如下。注意，以下代码中无需引用任何 CSS 文件！！！
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<divid="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E=window.wangEditor
var editor=newE('#editor')
// 或者 var editor = new E( document.getElementById('editor'))
editor.create()
</script>
</body>
</html>
编辑器效果如下：
3、配置菜单、颜色、表情、字体、全屏
3.1 配置菜单
编辑器创建之前，可使用editor.customConfig.menus定义显示哪些菜单和菜单的顺序。
注意：v3 版本的菜单不支持换行折叠了（因为换行之后菜单栏是在太难看），如果菜单栏宽度不够，建议精简菜单项。
3.2 配置颜色
编辑器的字体颜色和背景色，可以通过editor.customConfig.colors自定义配置
3.3 配置表情
v3.0.15开始支持配置表情，支持图片格式和 emoji ，可通过editor.customConfig.emoti ons配置。
温馨提示：需要表情图片可以去 https://api.weibo.com/2/emotions.json?source=136240 4091 和 http://yuncode.net/code/c_524ba520e58ce30 逛一逛，或者自己搜索。
3.4 配置字体
编辑器的字体，可以通过editor.customConfig.fontNames自定义配置。
3.5 配置全屏
wangEditor3没有内置全屏功能，但是作者做了一个全屏插件。插件地址：https://github.com/chris-peng/wangEditor-fullscreen-plugin。
使用方法：由于该版本依赖jquery或者zepto，所以必须先引入jquery或zepto；接着，将下载的全屏插件解压，找到wangEditor-fullscreen-plugin.css和wangEditor-fullscreen-plugin.js两个文件，复制到工程相应的目录下，分别引用；在wangEditor的create方法调用后，再调用插件的初始化方法，如：
var E = window.wangEditor;
var editor = new E('#editor');
editor.create();
E.fullscreen.init('#editor');
代码示例如下：
<!DOCTYPE html>
<html>
<head>
//导入全屏样式
<link type="text/css" href="css/wangEditor-fullscreen-plugin.css" rel="stylesheet">
<title>wangEditor demo</title>
</head>
<body>
<div id="div1">
<p>
欢迎使用 wangEditor 富文本编辑器
</p>
</div>
//引入jquery
<script src="/jquery.js" type="text/javascript" ></script>
//引入wangEditor-fullscreen-plugin.js
<script src="/wangEditor-fullscreen-plugin.js"></script>
//引入wangEditor.min.js
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E=window.wangEditor
vareditor=newE('#div1')
//注意：自定义配置一定要写在editor.create()语句前
// 自定义菜单配置
editor.customConfig.menus=[
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
// 自定义配置颜色（字体颜色、背景色）
editor.customConfig.colors = [
'#000000',
'#eeece0',
'#1c487f',
'#4d80bf',
'#c24f4a',
'#8baa4a',
'#7b5ba1',
'#46acc8',
'#f9963b',
'#ffffff'
]
// 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置 editor.customConfig.emotions = [
{
// tab 的标题
title: '默认',
// type -> 'emoji' / 'image'
type: 'image',
// content -> 数组
content: [
{
alt: '[坏笑]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
},
{
alt: '[舔屏]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
}
]
},
{
// tab 的标题
title: 'emoji',
// type -> 'emoji' / 'image'
type: 'emoji',
// content -> 数组
content: [
'😀', '😃', '😄', '😁', '😆'
]
}
]
// 自定义字体
editor.customConfig.fontNames = [
'宋体',
'微软雅黑',
'Arial',
'Tahoma',
'Verdana'
]
editor.create()
//初始化全屏功能
E.fullscreen.init('#div1');
</script>
</body>
</html>
4、总结
还有好多内容没有列举出来，大家可以参考官网文档，写的很详细。本人是菜鸟一枚，代码有什么问题敬请提出，我好改正。有什么更好的提议也请提出，一起探讨。如果对你有帮助的话，也麻烦给个赞，激励一下作者，谢谢大家！！！！！
网友评论