首页 /  技术专区  /  Vue.js 宽屏模式 >

Vue使用百度富文本编辑器ueditor配合highlight.js实现代码高亮显示

使用过百度富文本编辑器的同学,应该知道用原有的"代码语言"功能写出来的代码显示毫无高亮显示,让人毫无看下去的欲望,就像下面这样。

image.png

所以我决定使用highlight.js来美化一下,让代码高亮显示。

首先下载安装highlight.js。

cnpm install highlight.js --save

导入js和css,这里css的样式可以自己去百度找,选择自己喜欢的一款引入。

import hljs from 'highlight.js' //导入代码高亮文件
import 'highlight.js/styles/atom-one-dark.css'  //导入代码高亮样式

由于百度富文本编辑器的代码是用<pre>标签包裹,而highlight.js是通过<pre><code>标签和类名进行渲染的,所以我们需要在提交的时候处理一下,把<pre>标签替换成我们想要的<pre><code>形式,通过下面的代码实现,this.msg是富文本编辑器里面的内容。

hlCode(){
    //替换pre标签,前端高亮显示    
    let content=this.msg;    
    let c=document.createElement('div');    
    c.innerHTML=content;
    for(let i=0;i<c.getElementsByTagName('pre').length;i++)
    {
        let con=c.getElementsByTagName('pre')[i].innerHTML;
        c.getElementsByTagName('pre')[i].innerHTML='<code class="hljs ini">'+con+'</code>';
        hljs.highlightBlock(c.getElementsByTagName('pre')[i]);  //使用插件高亮你的代码块    
    }    
    content=c.innerHTML;    
    this.msg = content;
    return content;
}

之后就可以将返回的content进行持久化处理了,比如放到数据库里做持久化处理。

这个时候我们只是处理了发布时候的标签替换,需要在前端显示的地方同时也下载安装highlight.js和导入css。

cnpm install highlight.js --save
import 'highlight.js/styles/atom-one-dark.css'

大功告成,最后来张效果图:image.png




头像
0/200
图片验证码