wangeditor3如何集成highlightJs实现代码高亮？

怼烎@ 2022-12-11 09:09 410阅读 0赞

最近在整改个人博客的过程中，想顺手将以前使用的一个富文本编辑器wangEditor也升级一下，却碰到了一个非常操蛋的问题，在版本迭代到了3.x的时候（本文中使用的是3.1.1版本），作者将代码高亮功能取消了，实在是让人头大。

![wangeditor3如何集成highlightJs实现代码高亮？][wangeditor3_highlightJs]

我去他的GitHub上溜达了一圈，发现对于拿掉代码高亮这个功能，困惑的人还不少，作者也做了不少答复，总结下来有两个原因。

## 一、个人精力有限 ##

![wangeditor3如何集成highlightJs实现代码高亮？][wangeditor3_highlightJs 1]

## 二、受众群体主要不是程序员 ##

![wangeditor3如何集成highlightJs实现代码高亮？][wangeditor3_highlightJs 2]

这种涉及到高亮的issue都是在2017年提出来的，都3年了，作者也还是一直没有抽出精力来优化，而在2018年的时候，作者回复了一个关于代码高亮的issue，并给出了具体的实现思路，瞬间让我感动的泪流满面，大佬终究还是没有放弃我们这一小撮程序猿受众群体。

![wangeditor3如何集成highlightJs实现代码高亮？][wangeditor3_highlightJs 3]

如上图，作者给出了4个步骤，甚至把需要修改的代码在多少行都指出来了，话都说到这一步了，跟他自己写出来也么啥两样了，今天就来教大家如何按照作者的这个思路来将highlight.js集成进来，实现代码高亮（作者说的比较抽象，我实现起来，步骤可能稍微有些差异）。

## 一、修改代码块对应的\_createPanel方法，增加编程语言下拉框 ##

代码位置大概在2024行，源代码如下：

_createPanel: function _createPanel(value) {
        
        var _this = this;
        // value - 要编辑的内容
        value = value || '';
        var type = !value ? 'new' : 'edit';
        var textId = getRandom('texxt');
        var btnId = getRandom('btn');
        var panel = new Panel(this, {
        
            width: 500,
            // 一个 Panel 包含多个 tab
            tabs: [{
        
                // 标题
                title: '插入代码',
                // 模板
                tpl: '<div>\n <textarea id="' + textId + '" style="height:145px;;">' + value + '</textarea>\n <div class="w-e-button-container">\n <button id="' + btnId + '" class="right">\u63D2\u5165</button>\n </div>\n <div>',
                // 事件绑定
                events: [
                // 插入代码
                {
        
                    selector: '#' + btnId,
                    type: 'click',
                    fn: function fn() {
        
                        var $text = $('#' + textId);
                        var text = $text.val() || $text.html();
                        text = replaceHtmlSymbol(text);
                        if (type === 'new') {
        
                            // 新插入
                            _this._insertCode(text);
                        } else {
        
                            // 编辑更新
                            _this._updateCode(text);
                        }
                        // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
                        return true;
                    }
                }]
            } // first tab end
            ] // tabs end
        }); // new Panel end
        // 显示 panel
        panel.show();
        // 记录属性
        this.panel = panel;
    }

从tpl参数可以看到，代码块输入框基本上就是由一个textarea组成的，那我们想要的一个编程语言下拉框，那就在这里给它拼一个select下拉框放进去。

_createPanel: function _createPanel(value) {
        
        var _this = this;
    
        // value - 要编辑的内容
        value = value || '';
        var type = !value ? 'new' : 'edit';
        var textId = getRandom('texxt');
        var btnId = getRandom('btn');
    
        // 编程语言
        var select = "<select class='code-type' style='border:1px solid #666;color:#666;margin-top:4px'><option value=''>编程语言</option>";
        jQuery.each(hljs.listLanguages(), function(i, e) {
        
            select += "<option value='" + e + "'>" + e + "</option>";
        });
        select += "</select>";
    
        var panel = new Panel(this, {
        
            width: 500,
            // 一个 Panel 包含多个 tab
            tabs: [{
        
                // 标题
                title: '插入代码',
                // 模板
                tpl: '<div><textarea id="' + textId + '" style="resize:vertical;min-height:145px">' + value + '</textarea><div class="w-e-button-container">' + select + '<button id="' + btnId + '" class="right">\u63D2\u5165</button></div><div>',
                // 事件绑定
                events: [
                // 插入代码
                {
        
                    selector: '#' + btnId,
                    type: 'click',
                    fn: function fn() {
        
                        var $text = $('#' + textId);
                        var text = $text.val() || $text.html();
                        text = replaceHtmlSymbol(text);
                        if (type === 'new') {
        
                            // 新插入
                            _this._insertCode(text);
                        } else {
        
                            // 编辑更新
                            _this._updateCode(text);
                        }
    
                        // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
                        return true;
                    }
                }]
            } // first tab end
            ] // tabs end
        }); // new Panel end
    
        // 显示 panel
        panel.show();
    
        // 记录属性
        this.panel = panel;
    }

## 二、修改\_insertCode方法，增加hljs高亮样式，并触发高亮 ##

代码位置大概在2075行，源代码如下：

// 插入代码
    _insertCode: function _insertCode(value) {
        
     var editor = this.editor;
     editor.cmd.do('insertHTML', '<pre><code>' + value + '</code></pre><p><br></p>');
    }

可以看到insertHtml的时候，并没有带上highlight.js高亮需要的样式，也没有调用highlight.js的api触发高亮，我们都在这里给它加上去。

// 插入代码
    _insertCode: function _insertCode(value) {
        
        var editor = this.editor;
        // 将语言类型加到css中
        var codeType = jQuery('select.code-type').val();
        editor.cmd.do('insertHTML', '<pre><code class="hljs '+codeType+'">' + value + '</code></pre><p><br></p>');
        // 触发高亮
        document.querySelectorAll('pre code').forEach((block) => {
        
            hljs.highlightBlock(block);
        });
    }

## 三、修改onClick方法，在代码回显时保证排版不乱 ##

这一步，也不知道大家理不理解，就是我将光标点在代码块上，再去点击上方工具栏中的“插入代码”图标时，会自动将代码块的内容回填到那个textarea中去。

代码位置大概在1992行，源代码如下：

onClick: function onClick(e) {
        
        var editor = this.editor;
        var $startElem = editor.selection.getSelectionStartElem();
        var $endElem = editor.selection.getSelectionEndElem();
        var isSeleEmpty = editor.selection.isSelectionEmpty();
        var selectionText = editor.selection.getSelectionText();
        var $code = void 0;
        if (!$startElem.equal($endElem)) {
        
            // 跨元素选择，不做处理
            editor.selection.restoreSelection();
            return;
        }
        if (!isSeleEmpty) {
        
            // 选取不是空，用 <code> 包裹即可
            $code = $('<code>' + selectionText + '</code>');
            editor.cmd.do('insertElem', $code);
            editor.selection.createRangeByElem($code, false);
            editor.selection.restoreSelection();
            return;
        }
        // 选取是空，且没有夸元素选择，则插入 <pre><code></code></prev>
     if (this._active) {
        
     // 选中状态，将编辑内容
            this._createPanel($startElem.html());
        } else {
        
            // 未选中状态，将创建内容
            this._createPanel();
        }
    }

大家注意2017行代码， s t a r t E l e m . h t m l ( ) 获 取 的 内 容 是 带 有 了 h t m l 标 签 的 ， 回 显 到 填 写 代 码 块 的 那 个 t e x t a r e a 中 肯 定 不 行 ， 可 是 我 改 成 startElem.html()获取的内容是带有了html标签的，回显到填写代码块的那个textarea中肯定不行，可是我改成 startElem.html()获取的内容是带有了html标签的，回显到填写代码块的那个textarea中肯定不行，可是我改成startElem.text()之后，发现html标签是没有了，但是样式排版也没了，比如说回车换行和空格符之类的，都被过滤掉了，所以不能用这几个API了，我直接获取了元素的innerText。

onClick: function onClick(e) {
        
        var editor = this.editor;
        var $startElem = editor.selection.getSelectionStartElem();
        var $endElem = editor.selection.getSelectionEndElem();
        var isSeleEmpty = editor.selection.isSelectionEmpty();
        var selectionText = editor.selection.getSelectionText();
        var $code = void 0;
        if (!$startElem.equal($endElem)) {
        
            // 跨元素选择，不做处理
            editor.selection.restoreSelection();
            return;
        }
        if (!isSeleEmpty) {
        
            // 选取不是空，用 <code> 包裹即可
            $code = $('<code>' + selectionText + '</code>');
            editor.cmd.do('insertElem', $code);
            editor.selection.createRangeByElem($code, false);
            editor.selection.restoreSelection();
            return;
        }
        // 选取是空，且没有夸元素选择，则插入 <pre><code></code></prev>
        if (this._active) {
        
            // 选中状态，将编辑内容
            this._createPanel($startElem[0].innerText);
            // 编程语言下拉回显
            var className = $startElem.attr('class');
            if (className) {
        
                jQuery('select.code-type').val(className.split(' ')[1]);
            }
        } else {
        
            // 未选中状态，将创建内容
            this._createPanel();
        }
    }

## 四、修改\_updateCode方法，二次编辑确认之后，触发hljs高亮 ##

代码位置大概在2081行，源代码如下：

可以看到，这里并没有触发高亮的动作，所以在我们修改了代码块之后，会出现hljs高亮丢失的情况，给它加两行跟\_insertCode一样的代码。

// 更新代码
    _updateCode: function _updateCode(value) {
        
        var editor = this.editor;
        var $selectionELem = editor.selection.getSelectionContainerElem();
        if (!$selectionELem) {
        
            return;
        }
        // 获取最新的编程语言
        var codeType = jQuery('select.code-type').val();
        jQuery($selectionELem).prop('class', '');
        jQuery($selectionELem).prop('class', 'hljs ' + codeType);
    
        $selectionELem.html(value);
        editor.selection.restoreSelection();
        // highlight.js
        document.querySelectorAll('pre code').forEach((block) => {
        
            hljs.highlightBlock(block);
        });
    }

一套下来，行云流水，直接上效果图：

![wangeditor3如何集成highlightJs实现代码高亮？][wangeditor3_highlightJs 4]

我将我改好的一份js放到了网盘，大家有觉着麻烦的，或者前端基础薄弱的，可以直接来我公众号(雨落无影)回复“wangEditor3”领取哦！！！

[wangeditor3_highlightJs]: /images/20221123/6d44b0a9da8a42868136f0db2d76cc53.png
[wangeditor3_highlightJs 1]: /images/20221123/6b1ce6f6136845bdb6e91ea04260e7ca.png
[wangeditor3_highlightJs 2]: /images/20221123/87573b3a33804f6885f5930cfa5f69ac.png
[wangeditor3_highlightJs 3]: /images/20221123/f44dac0ba8f34cc78315d6fc9c6a6445.png
[wangeditor3_highlightJs 4]: /images/20221123/4b586c1952ea452e8f5b3e093ed62bdf.png