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', // 列表 'justifyleft', 'justifycenter', 'justifyright', 'fgx', //分割线 'image', // 插入图片 ] editor.create(); </script>
wangEditor.js
/* menu - justify */ // 构造函数 function JustifyLeft(editor) { var _this = this; this.editor = editor; this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paragraph-left"></i></div>'); this.type = 'click'; // 当前是否 active 状态 this._active = false; } // 原型 JustifyLeft.prototype = { constructor: JustifyLeft, // 执行命令 onClick: function onClick(e) { var editor = this.editor; editor.cmd.do('justifyLeft'); }, }; // 构造函数 function JustifyCenter(editor) { var _this = this; this.editor = editor; this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paragraph-center"></i></div>'); this.type = 'click'; // 当前是否 active 状态 this._active = false; } // 原型 JustifyCenter.prototype = { constructor: JustifyCenter, // 执行命令 onClick: function onClick(e) { var editor = this.editor; editor.cmd.do('justifyCenter'); }, }; // 构造函数 function JustifyRight(editor) { var _this = this; this.editor = editor; this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paragraph-right"></i></div>'); this.type = 'click'; // 当前是否 active 状态 this._active = false; } // 原型 JustifyRight.prototype = { constructor: JustifyRight, // 执行命令 onClick: function onClick(e) { var editor = this.editor; editor.cmd.do('justifyRight'); }, };
MenuConstructors.justifyleft = JustifyLeft; MenuConstructors.justifycenter = JustifyCenter; MenuConstructors.justifyright = JustifyRight;
效果图
