给wangeditor添加上标、下标功能

boophan

已于 2022-09-09 16:25:07 修改

阅读量1.3k

点赞数 2

文章标签： wangeditor自定义

于 2021-07-24 12:27:32 首次发布

本文链接：https://blog.csdn.net/boophan/article/details/119056282

版权

本文介绍如何为WangEditor富文本编辑器手动添加上标（Sup）和下标（Sub）功能。通过定义构造函数和原型，实现了点击菜单后插入上标和下标的HTML代码，并更新了菜单的active状态。此外，还展示了菜单配置，方便自定义编辑器的菜单项。此方法使得用户能够便捷地在WangEditor中使用上标和下标功能。

摘要由CSDN通过智能技术生成

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