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;
效果图
