UEditor 使用 highlight 代码高亮

前端APP 投稿 70300 0 评论

UEditor 使用 highlight 代码高亮

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。官网下载地址

highlight.js 是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目。官网下载地址

UEditor编辑器中将其默认的代码高亮插件 SyntaxHighlighter,感觉有点臃肿,每次是要倒要导入对应语言的JS文件才行,打算将它修改成时下非常流行的 highlight.js。

UEditor使用highlight代码高亮,具体修改方法步骤如下:

1、首先打开ueditor.all.js

2、源码找到13188行

pre.className = 'brush:'+lang+';toolbar:false;';

改为

pre.className = lang;

3、源码找到13268行

me.execCommand('inserthtml','<pre id="coder"class="brush:'+lang+';toolbar:false">'+code+'</pre>',true;

改为

me.execCommand('inserthtml','<pre id="coder" class="'+lang+'"><code>'+code+'</code></pre>',true;

4、源码找到13294行

var match = node.className.match(/brush:([^;]+/;
lang = match && match[1] ? match[1] : '';

改为

lang = node.className;

5、源码找到13303行

将 pre 改为 code

utils.each(root.getNodesByTagName('pre',function(pre{

改为

utils.each(root.getNodesByTagName('code',function(pre{

6、源码找到13326行

将 pre 改为 code

utils.each(root.getNodesByTagName('pre',function(pre{

改为

utils.each(root.getNodesByTagName('code',function(pre{

7、源码找到13375行

将 pre 改为 code

var pre = domUtils.findParentByTagName(rng.startContainer,'pre',true;

改为

var pre = domUtils.findParentByTagName(rng.startContainer,'code',true;

8、源码找到13487行

将 pre 改为 code

var pre = domUtils.findParentByTagName(rng.startContainer,'pre',true;

改为

var pre = domUtils.findParentByTagName(rng.startContainer,'code',true;

9、源码找到13545行

将 pre 改为 code

pre = domUtils.findParentByTagName(rng.startContainer,'pre',true;

改为

pre = domUtils.findParentByTagName(rng.startContainer,'code',true;

10、源码找到13629行

将 pre 改为 code

if(rng.collapsed && (pre = domUtils.findParentByTagName(rng.startContainer,'pre',true && !pre.nextSibling{

改为

if(rng.collapsed && (pre = domUtils.findParentByTagName(rng.startContainer,'code',true && !pre.nextSibling{

11、源码找到13647行

将 pre 改为 code

if(domUtils.isTagNode(start,'pre' && rng.collapsed && domUtils.isStartInblock(rng{

改为

if(domUtils.isTagNode(start,'code' && rng.collapsed && domUtils.isStartInblock(rng{

12、源码找到16287行

将 pre 改为 code

case 'pre':

改为

case 'code':

highlight实现代码块左右滑动

pre code {
    /*实现左右滑动块*/
   white-space: pre !important;
    overflow-x: scroll !important;
    word-break: keep-all !important;
    word-wrap: initial !important;
}

如果有不对的地方欢迎大家留言。

编程笔记 » UEditor 使用 highlight 代码高亮

赞同 (141) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽