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


在我们的项目中经常会用到富文本编辑器,网上也有很多这样的工具,这里我以百度编辑器为例给大家做演示,网上很多文章讲的就使用百度编辑器里自带的高度功能解决,但我经过测试并不能解决代码高亮显示的问题,网上也找了很多关于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'],

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

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

评论


匿名用户:
2024-02-01 17:39:48

dfgdfjkmgoeijb dmk;gk;gkfd;g;ldfg;gdgdg


匿名用户:
2024-01-10 08:58:06
@ 匿名用户 "const demoTreeList = (keyword) => {   const result = {     list: [] as Recordable[],   };   for (let index = 0; index "
22222222森岛帆高水电费是的发撒的

匿名用户:
2024-01-10 08:57:19
const demoTreeList = (keyword) => {
  const result = {
    list: [] as Recordable[],
  };
  for (let index = 0; index 



匿名用户:
2023-06-04 22:45:32
zhey这样测试一下少时诵诗书所所所所所所所所所所
112555



匿名用户:
2022-11-19 17:10:22
var i = 0;
function(){
}



匿名用户:
2022-08-03 18:09:35
var i = 0;
function(){
}



匿名用户:
2022-08-03 18:08:12
display:none;
opacity:0



匿名用户:
2022-07-19 00:11:33
.test{
  border:20px
}




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

fhdiuf
g
fhdjdj
fhshdj



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

aaaaaagghhhgfhfghfghfhfgh



匿名用户:
2022-05-10 04:11:00
var a = 1    



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

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


匿名用户:
2022-01-20 10:51:51
if(a==b){
alert(1);
}



匿名用户:
2021-11-23 12:59:54
public static void main(String args){System.out.prientln("Hello World")}



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