我使用的wangeditor没有上标和下标功能,以下是自己添加功能的方法
1. 设计功能的函数和原型
/*
Sup-menu
*/
// 构造函数
function Sup(editor) {
this.editor = editor;
this.$elem = $('<div class="w-e-menu">↑</div>');
this.type = 'click';
// 当前是否 active 状态
this._active = false;
}
// 原型
Sup.prototype = {
constructor: Sup,
// 点击事件
onClick: function onClick(e) {
// 点击菜单将触发这里
var editor = this.editor;
var isSeleEmpty = editor.selection.isSelectionEmpty();
if (isSeleEmpty) {
// 选区是空的,插入并选中一个“空白”
editor.selection.createEmptyRange();
}
// 执行 bold 命令
editor.cmd.do('insertHTML','<sup>'+editor.selection.getSelectionText()+'</sup>');
if (isSeleEmpty) {
// 需要将选取折叠起来
editor.selection.collapseRange();
editor.selection.restoreSelection();
}
},
// 试图改变 active 状态
tryChangeActive: function tryChangeActive(e) {
var editor = this.editor;
var $elem = this.$elem;
if (editor.cmd.queryCommandState('Sup')) {
this._active = true;
$elem.addClass('w-e-active');
} else {
this._active = false;
$elem.removeClass('w-e-active');
}
}
};
2. 添加菜单注册
// 存储菜单的构造函数
var MenuConstructors = {};
MenuConstructors.bold = Bold;
MenuConstructors.head = Head;
MenuConstructors.fontSize = FontSize;
MenuConstructors.fontName = FontName;
MenuConstructors.link = Link;
MenuConstructors.italic = Italic;
MenuConstructors.redo = Redo;
MenuConstructors.strikeThrough = StrikeThrough;
MenuConstructors.underline = Underline;
MenuConstructors.HRline = HRline; //水平线
MenuConstructors.Sup = Sup; //上标
MenuConstructors.Sub = Sub; //下标
MenuConstructors.undo = Undo;
MenuConstructors.list = List;
MenuConstructors.justify = Justify;
MenuConstructors.foreColor = ForeColor;
MenuConstructors.backColor = BackColor;
MenuConstructors.quote = Quote;
MenuConstructors.code = Code;
MenuConstructors.emoticon = Emoticon;
MenuConstructors.table = Table;
MenuConstructors.video = Video;
MenuConstructors.mathsymbol = Mathsymbol;//公式输入器
MenuConstructors.image = Image;
3. 添加菜单配置
var config = {
// 默认菜单配置 (修改菜单顺序)
menus: [ 'bold','italic', 'underline', 'strikeThrough','Sup','Sub','HRline', 'head', 'fontSize', 'fontName', 'foreColor', 'backColor',
'list', 'justify', 'emoticon', 'image', 'table','mathsymbol', 'link', 'video','undo', 'redo'],
【说明】:用这种方法,可以很方便的添加wangeditor菜单中还没有的标签