wangEditor3菜单修改之如何添加分割线 原创

html

复制收展HTML<div id="editor">
				   <!--  <p>欢迎使用，累行客</p> -->
				</div>
1
2
3

js

复制收展JavaScript// 自定义菜单配置
	editor.customConfig.menus = [
		'head',  // 标题
		'bold',  // 粗体
		'fontSize',  // 字号
		'fontName',  // 字体
		'italic',  // 斜体
		'underline',  // 下划线
		'strikeThrough',  // 删除线
		'foreColor',  // 文字颜色
		'backColor',  // 背景颜色
		'link',  // 插入链接
		'list',  // 列表
		'justify',  // 对齐方式
		'quote',  // 引用
		'hr', //水平线
'emoticon',  // 表情
		'image',  // 插入图片
		'table',  // 表格
		/*'video',  // 插入视频*/
		'code',  // 插入代码
		'undo',  // 撤销
		'redo'  // 重复
	];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

wangEditor.js 

添加构造函数，添加点击事件下面代码不要放在最后，不然调不到

复制收展JavaScript/*
    hr-menu
    分割线
*/
// 构造函数
function Hr(editor) {
    this.editor = editor;
    this.$elem = $('<div class="w-e-menu">\n            <i class="w-e-icon-fgx">—</i>\n        </div>');
    this.type = 'click';
    // 当前是否 active 状态
    this._active = false;
}
// 原型
Hr.prototype = {
    constructor: Hr,
    // 点击事件
    onClick: function onClick(e) {
        // 点击菜单将触发这里
        var editor = this.editor;

        // 执行 bold 命令
        editor.cmd.do('insertHTML','<hr/><br/>');
    },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

存储菜单的构造函数

在wangEditor.js中搜索MenuConstructors

添加

MenuConstructors.hr = Hr;

效果

插入分割线

内容

内容

分割线