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;
}
如果有不对的地方欢迎大家留言。