给wangeditor添加上标、下标功能

我使用的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菜单中还没有的标签

给wangeditor添加上标、下标功能相关推荐

POI操作word文档-添加上标下标
背景: 接了新需求,前端提供一个大概的word模板,包含通用信息,用户在前端填写可修改内容至模板完善,然后将整个数据传递给后端进行保存,后端提供导出word的功能. 数据中包含这种类型,由于前端输出框 ...
css拖拽调整高度,两种为wangEditor添加拖拽调整高度的方式：CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
R语言ggplot2可视化在轴标签中添加上标（Superscript）和下标（subscript）实战
R语言ggplot2可视化在轴标签中添加上标(Superscript)和下标(subscript)实战 library(ggplot2) qplot(uptake, data = CO2) +xlab ...
a上标3下标6算法_Word用快捷键给文字插入上标和下标，并同时添加上下标
在 Word 中,既可以给字母.单词添加上标和下标,又可以给汉字添加:添加的方法有两种,一种是用快捷键添加,另一种是用鼠标选择添加.另外,还可以给它们同时添加上下标,但 Word 没有提供直接添加功能 ...
R语言ggplot2可视化：ggplot2可视化为轴标签添加复杂下标（Subscripts）和上标（superscripts）、离子化学符号(ionic chemical notation)等
R语言ggplot2可视化:ggplot2可视化为轴标签添加复杂下标(Subscripts)和上标(superscripts).离子化学符号(ionic chemical notation)等目录
visio中给文字添加上标、下标
visio中给文字添加上标.下标步骤1:选中需要上标.下标的字符步骤2:上标快捷键ctrl+shift+"="#等于符号＝下标ctrl+"="
python绘图添加上下标
添加上标:^ 添加下标:_ import numpy as np import matplotlib.pyplot as pltt = np.linspace(0, 10, 1000) y = np. ...
visio中给文字添加上下标
使用快捷键添加上标,选中要添加的文字,按快捷键ctr+shift+"=" 添加下标,选中要添加的内容,按快捷键ctr+"=" 使用公式编辑器有时需要给上标再 ...
python为字体添加上下标
添加上标:^ 添加下标:_ 举例: import numpy as np import matplotlib.pyplot as pltt = np.linspace(0, 10, 1000) y = ...

给wangeditor添加上标、下标功能

给wangeditor添加上标、下标功能相关推荐

最新文章

热门文章