首页   >   代码编程   >   WEB前端

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

最近在整改个人博客的过程中,想顺手将以前使用的一个富文本编辑器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”领取哦!!!

雨落无影

QQ群Ⅰ: 686430774 (已满)

QQ群Ⅱ: 718410762

QQ群Ⅲ: 638620451 (已满)

QQ群Ⅳ: 474195684

QQ群Ⅴ: 463034360 (已满)

QQ群Ⅵ: 879266502

QQ群Ⅶ: 627786015 (已满)

工作5分钟,吹逼2小时: 855525339 (娱乐消遣,广告狗勿进)

如果文章有帮到你,可以考虑请博主喝杯咖啡!

分享到:

欢迎分享本文,转载请注明出处!

作者:不忘初心

发布时间:2020-09-28

永久地址:https://www.jiweichengzhu.com/article/350f5d44b6c34b4287b39586c8d4ac19

评论