wangEditor3菜单修改之拆分有序排列无序排列菜单
wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
官网：www.wangEditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor
简单介绍一下wangEditor如何拆分有序排列无序排列菜单。
html
<div id="editor" class="col-lg-9" style="margin-left: 10%"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div>
js
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
editor.customConfig.menus =
[
'head', // 标题
'bold', // 粗体
'list', // 列表
'listn', // 列表
'fgx', //分割线
'image', // 插入图片
]
editor.create();
</script>wangEditor.js
/*
menu - list
*/
// 构造函数
function List(editor) {
var _this = this;
this.editor = editor;
this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-list-numbered"></i></div>');
this.type = 'click';
// 当前是否 active 状态
this._active = false;
}
// 原型
List.prototype = {
constructor: List,
// 执行命令
onClick: function onClick(e) {
var editor = this.editor;
var $textElem = editor.$textElem;
editor.cmd.do('insertOrderedList');
// 验证列表是否被包裹在 <p> 之内
var $selectionElem = editor.selection.getSelectionContainerElem();
if ($selectionElem.getNodeName() === 'LI') {
$selectionElem = $selectionElem.parent();
}
if (/^ol|ul$/i.test($selectionElem.getNodeName()) === false) {
return;
}
if ($selectionElem.equal($textElem)) {
// 证明是顶级标签，没有被 <p> 包裹
return;
}
var $parent = $selectionElem.parent();
if ($parent.equal($textElem)) {
// $parent 是顶级标签，不能删除
return;
}
$selectionElem.insertAfter($parent);
$parent.remove();
},
// 试图改变 active 状态
tryChangeActive: function tryChangeActive(e) {
var editor = this.editor;
var $elem = this.$elem;
if (editor.cmd.queryCommandState('insertOrderedList')) {
this._active = true;
$elem.addClass('w-e-active');
} else {
this._active = false;
$elem.removeClass('w-e-active');
}
}
};
//无序
function Listn(editor) {
var _this = this;
this.editor = editor;
this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-list2"></i></div>');
this.type = 'click';
// 当前是否 active 状态
this._active = false;
}
// 原型
Listn.prototype = {
constructor: Listn,
// 执行命令
onClick: function onClick(e) {
var editor = this.editor;
var $textElem = editor.$textElem;
editor.cmd.do('insertUnorderedList');
// 验证列表是否被包裹在 <p> 之内
var $selectionElem = editor.selection.getSelectionContainerElem();
if ($selectionElem.getNodeName() === 'LI') {
$selectionElem = $selectionElem.parent();
}
if (/^ol|ul$/i.test($selectionElem.getNodeName()) === false) {
return;
}
if ($selectionElem.equal($textElem)) {
// 证明是顶级标签，没有被 <p> 包裹
return;
}
var $parent = $selectionElem.parent();
if ($parent.equal($textElem)) {
// $parent 是顶级标签，不能删除
return;
}
$selectionElem.insertAfter($parent);
$parent.remove();
},
// 试图改变 active 状态
tryChangeActive: function tryChangeActive(e) {
var editor = this.editor;
var $elem = this.$elem;
if (editor.cmd.queryCommandState('insertUnOrderedList')) {
this._active = true;
$elem.addClass('w-e-active');
} else {
this._active = false;
$elem.removeClass('w-e-active');
}
}
};MenuConstructors.list = List; MenuConstructors.listn = Listn;
效果图
