您现在的位置是：网站首页 > 代码编程 > WEB前端WEB前端

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

不忘初心 不忘初心 2020-09-28 围观() 评论() 点赞() 【WEB前端】

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

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

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

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

一、个人精力有限

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

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

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

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

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

如上图，作者给出了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行代码，$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行，源代码如下：

// 更新代码
_updateCode: function _updateCode(value) {
    var editor = this.editor;
    var $selectionELem = editor.selection.getSelectionContainerElem();
    if (!$selectionELem) {
        return;
    }
    $selectionELem.html(value);
    editor.selection.restoreSelection();
}

可以看到，这里并没有触发高亮的动作，所以在我们修改了代码块之后，会出现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实现代码高亮？

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

富文本编辑器wangEditor

看完文章，有任何疑问，请加入群聊一起交流！！！

很赞哦！ ()

上一篇：你为什么要关注“雨落无影”公众号？

下一篇：Highlight.js不兼容换行符，导致代码块注释高亮排版错乱

相关文章

文章评论

    • 请先说点什么
    人参与，条评论

请使用电脑浏览器访问本页面，使用手机浏览器访问本页面会导致下载文件异常！！！

雨落无影

关注上方公众号，回复关键字【下载】获取下载码

用完即删，每次下载需重新获取下载码

若出现下载不了的情况，请及时联系站长进行解决

热门阅读

IntelliJ IDEA 2020.1版本最新激活方法（向下兼容）IntelliJ IDEA 2020.1版本最新激活方法（向下兼容）

站长推荐

写给关注支持我的朋友和攻击我网站的人（封面针对后者）写给关注支持我的朋友和攻击我网站的人（封面针对后者）

标签云

猜你喜欢

站点信息

  • 网站程序：spring + freemarker
  • 主题模板：《今夕何夕》
  • 文章统计：篇文章
  • 标签管理：标签云
  • 微信公众号：扫描二维码，关注我们