百度编辑器Ueditor+HighlightJs代码语言高亮显示的解决方法

2020-02-23 00:45 by viooma 2572 0

在我们的项目中经常会用到富文本编辑器，网上也有很多这样的工具，这里我以百度编辑器为例给大家做演示，网上很多文章讲的就使用百度编辑器里自带的高度功能解决，但我经过测试并不能解决代码高亮显示的问题，网上也找了很多关于HighlightJs的文章，方法也都差不多，反正在我站上没有体现效果，所以决定采用自己的办法来处理，首先自然是下载HighlightJs和采用CDN引入HighlightJs的支持文件如下：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

大家也可以把文件下载到本地，然后从本地载入这两个文件，然后进行代码初始化使HighLightJs生效，代码如下：

<script type="text/javascript">
	hljs.configure({
		tabReplace: '    ', // 4 spaces
		languages: ['javascript', 'java', 'python','html']
		});
		hljs.initHighlightingOnLoad();
</script>

至此，当我们预览文章的时候发现，高度效果并没有显示出来，这是因为HighlighJs需要对<pre><code>代码才能进行格式化高亮显示，而百度Ueditor编辑器会自动过滤掉<code>代码，也就是说要解决这个问题需要在文章页的<pre>里面动态添加<code>代码后再高度显示，第二种办法就是直接修改百度Ueditor编辑增加<code>代码，第一种方法网上有很多文章，这里我直接修改百度编辑器的文件增加<code>代码如下：

ueditor.all.js大概第13314行修改成：

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

Ueditor.min.js找到id="coder"这段代码，在代码段里修改成如下：

c.execCommand("inserthtml",'<pre id="coder"class="brush:'+b+';toolbar:false"><code>'+f+"</code></pre>",!0)

有些朋友可能还需要修改<code>的CSS属性，所以我们还可以在ueditor.config.js的,whitList: {段增加code的CSS白名单以便保护class和style属性如下：

code:   ['class', 'style'],

好了，大功告成，把文件上传至服务器，记得刷新缓存，不然可能不会有效果，然后看看效果吧！

注：本文转载自唯马网络，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除。

匿名用户:
2022-11-19 17:10:22

var i = 0;
function(){
}

回复 90 93

匿名用户:
2022-08-03 18:09:35

var i = 0;
function(){
}

回复 163 160

匿名用户:
2022-08-03 18:08:12

display:none;
opacity:0

回复 159 158

匿名用户:
2022-07-19 00:11:33

.test{
   border:20px
}

＞

回复 179 175

匿名用户:
2022-07-19 00:08:06

jdhdhd

fhdiuf
g
fhdjdj
fhshdj

回复 183 182

匿名用户:
2022-05-21 21:20:07

aaaaaagghhhgfhfghfghfhfgh

回复 234 247

匿名用户:
2022-05-10 04:11:00

var a = 1

回复 241 248

匿名用户:
2022-03-17 10:48:47

少时诵诗书所所所所所所所所所

回复 264 245

匿名用户:
2022-01-20 10:51:51

if(a==b){
alert(1);
}

回复 295 295

匿名用户:
2021-11-23 12:59:54

public static void main(String args){System.out.prientln("Hello World")}

回复 353 343

匿名用户:
2020-06-19 18:02:07

回复 592 644

匿名用户:
2020-05-16 16:21:42

public static

回复 625 623

匿名用户:
2020-04-27 10:05:44

public static void main(String args){System.out.prientln("Hello World")}

回复 617 667

匿名用户:
2020-03-05 11:12:28

231a564d56ad

回复 633 626

匿名用户:
2020-03-05 11:11:30

p{

    width:100px;
}

回复 622 628

发表问题/文章

百度编辑器Ueditor+HighlightJs代码语言高亮显示的解决方法

评论

热门文章