wangEditor3的简单使⽤（包括配置菜单、颜⾊、表情、字体、全
屏功能）
最近想做⼀个新闻后台管理系统，需要富⽂本编辑器编辑新闻内容然后上传，查询了许多的编辑器，最后选择wangEditor3。本⼈认为它的界⾯很漂亮，同时可以满⾜我的基本要求。接下来，我会分享这款插件的⼀些简单使⽤，⼤家也可以直接参考官⽹的⽂档，直接点
击wangEditor3官⽅在线开发⽂档进⼊，或者感兴趣的可以直接下载wangEditor3源码进⾏研究。后⾯⼏篇⽂章会分享它如何上传图⽚以及提交表单如何删除服务器中多余的图⽚。
⾸先简单介绍以下这款插件的特点。wangEditor是基于javascript和css开发的 Web富⽂本编辑器， 轻量、简洁、易⽤、开源免费。
官⽹：wangEditor - 轻量级web富⽂本编辑器
⽂档：介绍 · wangEditor3使⽤⼿册 · 看云
源码：GitHub - wangfupeng1988/wangEditor: wangEditor —— 轻量级web富⽂本框
1、w a ngEdito r3下载
官⽅⽂档介绍了四种下载的⽅式，分别是：
使⽤npm下载：npm install wangeditor（注意wangeditor全部是⼩写字母
⼩写字母）
使⽤bower下载：bower install wangEditor（前提保证电脑已安装了bower）
使⽤CDN：//unpkg/wangeditor/release/wangEditor.min.js
我选择的是直接在gitHub上下载最新版的wangEditor3，解压，进⼊release⽂件夹下到wangEditor.js或者wangEditor.min.js，复制到放javascript⽂件的⽂件夹⾥⾯，引⽤该js⽂件
2、创建⼀个编辑器
注意，以下代码中⽆需引⽤任何 CSS ⽂件
代码⽰例如下。注意，以下代码中⽆需引⽤任何 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">
var E=window.wangEditor
var editor=newE('#editor')
// 或者 var editor = new E( ElementById('editor'))
</script>
</body>
</html>
编辑器效果如下：
jquery源码在线
3、配置菜单、颜⾊、表情、字体、全屏
3.1 配置菜单
编辑器创建之前，可使⽤us定义显⽰哪些菜单和菜单的顺序。
注意：v3 版本的菜单不⽀持换⾏折叠了（因为换⾏之后菜单栏是在太难看），如果菜单栏宽度不够，建议精简菜单项。
3.2 配置颜⾊
编辑器的字体颜⾊和背景⾊，可以通过lors⾃定义配置
3.3 配置表情
v3.0.15开始⽀持配置表情，⽀持图⽚格式和 emoji ，可通过i ons配置。
3.4 配置字体
编辑器的字体，可以通过editor.customConfig.fontNames⾃定义配置。
3.5 配置全屏
使⽤⽅法：由于该版本依赖jquery或者zepto，所以必须先引⼊jquery或zepto；接着，将下载的全屏插件解压，到wangEditor-fullscreen-plugin.css和wangEditor-fullscreen-plugin.js两个⽂件，复制到⼯程相应的⽬录下，分别引⽤；在wangEditor的create⽅法调⽤
var E = window.wangEditor;
var editor = new E('#editor');
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')
//注意：⾃定义配置⼀定要写在ate()语句前
us=[
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // ⽂字颜⾊
'backColor', // 背景颜⾊
'link', // 插⼊链接
'list', // 列表
'justify', // 对齐⽅式
'quote', // 引⽤
'emoticon', // 表情
'image', // 插⼊图⽚
'table', // 表格
'video', // 插⼊视频
'code', // 插⼊代码
'undo', // 撤销
'redo' // 重复
]
// ⾃定义配置颜⾊（字体颜⾊、背景⾊） lors = [
'#000000',
'#eeece0',
'#1c487f',
'#4d80bf',
'#8baa4a',
'#7b5ba1',
'#46acc8',
'#f9963b',
'#ffffff'
]
// 表情⾯板可以有多个 tab ，因此要配置成⼀个数组。数组每个元素代表⼀个 tab 的配置 ions = [ {
// tab 的标题
title: '默认',
// type -> 'emoji' / 'image'
type: 'image',
// content -> 数组
content: [
{
alt: '[坏笑]',
src: 'sinajs/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
},
{
alt: '[舔屏]',
src: 'sinajs/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
}
]
},
{
// tab 的标题
title: 'emoji',
// type -> 'emoji' / 'image'

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。