最近在整改个人博客的过程中，想顺手将以前使用的一个富文本编辑器wangEditor也升级一下，却碰到了一个非常操蛋的问题，在版本迭代到了3.x的时候（本文中使用的是3.1.1版本），作者将代码高亮功能取消了，实在是让人头大。
我去他的GitHub上溜达了一圈，发现对于拿掉代码高亮这个功能，困惑的人还不少，作者也做了不少答复，总结下来有两个原因。
一、个人精力有限
二、受众群体主要不是程序员
这种涉及到高亮的issue都是在2017年提出来的，都3年了，作者也还是一直没有抽出精力来优化，而在2018年的时候，作者回复了一个关于代码高亮的issue，并给出了具体的实现思路，瞬间让我感动的泪流满面，大佬终究还是没有放弃我们这一小撮程序猿受众群体。
如上图，作者给出了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行，源代码如下：
// 更新代码
_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);
});
}
一套下来，行云流水，直接上效果图：
我将我改好的一份js放到了网盘，大家有觉着麻烦的，或者前端基础薄弱的，可以直接来我公众号(雨落无影)回复“wangEditor3”领取哦！！！
3017
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
