使用HighlightJS高亮UEditor代码段

发布于 / JavaScript / Comments Off on 使用HighlightJS高亮UEditor代码段

0x00、环境

UEditor默认的代码片段格式为

<pre class="brush:[代码语言];">...代码片段...</pre>

现在由于更换新的前端环境,由于某种原因要去使用HighlightJS,hljs在高亮处理时,匹配的代码片段格式为

<pre><code class="hljs [代码语言]">...代码片段...</code></pre>

接下来要将数据库内旧数据的pre字段改为支持HighlightJS的带有<code>标签的格式,并修改UEditor的内核文件,使新内容支持HighlightJS。

0x01、修改数据库,兼容旧文章

我们要为pre字段里面添加一个code标签,包裹住代码片段。

首先添加<code>,直接使用update语句即可:

UPDATE wp_post SET `post_content`=REPLACE(`post_content`, '<pre class="brush:cpp;">', '<pre class="brush:cpp;"><code class="hljs cpp">');

接着把cpp换成python、php、ruby...等等,依次替换即可。

这里注意:如果你的ueditor的class里还有别的元素,需要先替换掉class里面的杂项,必须归一化,一个标点,一个空格都不能差,否则替换不干净。

特别注意的时ueditor使用js表示JavaScript语言,但是hljs使用javascript表示JavaScript语言,因此必须使用这样的命令替换:

UPDATE wp_post SET `post_content`=REPLACE(`post_content`, '<pre class="brush:js;">', '<pre class="brush:javascript;"><code class="hljs javascript">');

最后,加上</code>即可:

UPDATE wp_post SET `post_content`=REPLACE(`post_content`, '</pre>', '</code></pre>');

有的同学可能会问,有的数据的pre字段不是放代码的,也被加上了个</code>怎么办?

其实对于Chrome和Firefox浏览器来说,多加了个</code>。由于前面没有<code>与之对应,会在解析的时候自动将其删掉。如果有强迫症,可以使用python的BS4将其一个个的删掉。

(或者手动一个个来233333)

0x02、修改ueditor.all.js,兼容hljs

注意看清你用的是ueditor.all.min.js还是ueditor.all.js。按照下面说明,修改你是用的js文件

首先找到:

me.setOpt('insertcode',{
            'as3':'ActionScript3',
            'bash':'Bash/Shell',
            'cpp':'C/C++',
            'css':'Css',
            'cf':'CodeFunction',
            'c#':'C#',
            'delphi':'Delphi',
            'diff':'Diff',
            'erlang':'Erlang',
            'groovy':'Groovy',
            'html':'Html',
            'java':'Java',
            'jfx':'JavaFx',
            'js':'Javascript',
            'pl':'Perl',
            'php':'Php',
            'plain':'Plain Text',
            'ps':'PowerShell',
            'python':'Python',
            'ruby':'Ruby',
            'scala':'Scala',
            'sql':'Sql',
            'vb':'Vb',
            'xml':'Xml'
    });

把js改为javascript:

me.setOpt('insertcode',{
            'as3':'ActionScript3',
            'bash':'Bash/Shell',
            'cpp':'C/C++',
            'css':'Css',
            'cf':'CodeFunction',
            'c#':'C#',
            'delphi':'Delphi',
            'diff':'Diff',
            'erlang':'Erlang',
            'groovy':'Groovy',
            'html':'Html',
            'java':'Java',
            'jfx':'JavaFx',
            'javascript':'Javascript',
            'pl':'Perl',
            'php':'Php',
            'plain':'Plain Text',
            'ps':'PowerShell',
            'python':'Python',
            'ruby':'Ruby',
            'scala':'Scala',
            'sql':'Sql',
            'vb':'Vb',
            'xml':'Xml'
    });

接着找:

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

(不同版本的UEditor的class可能会有不同)

改为:

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

接着找:

me.addInputRule(function(root){
       utils.each(root.getNodesByTagName('pre'),function(pre){
           var brs = pre.getNodesByTagName('br');
           if(brs.length){
               browser.ie && browser.ie11below && browser.version > 8 && utils.each(brs,function(br){
                   var txt = UE.uNode.createText('\n');
                   br.parentNode.insertBefore(txt,br);
                   br.parentNode.removeChild(br);
               });
               return;
            }
           if(browser.ie && browser.ie11below && browser.version > 8)
                return;
            var code = pre.innerText().split(/\n/);
            pre.innerHTML('');
            utils.each(code,function(c){
                if(c.length){
                    pre.appendChild(UE.uNode.createText(c));
                }
                pre.appendChild(UE.uNode.createElement('br'))
            })
       })
    });

把pre改为code。不然代码段里面回车会变成<br>

me.addInputRule(function(root){
       utils.each(root.getNodesByTagName('code'),function(pre){
           var brs = pre.getNodesByTagName('br');
           if(brs.length){
               browser.ie && browser.ie11below && browser.version > 8 && utils.each(brs,function(br){
                   var txt = UE.uNode.createText('\n');
                   br.parentNode.insertBefore(txt,br);
                   br.parentNode.removeChild(br);
               });
               return;
            }
           if(browser.ie && browser.ie11below && browser.version > 8)
                return;
            var code = pre.innerText().split(/\n/);
            pre.innerHTML('');
            utils.each(code,function(c){
                if(c.length){
                    pre.appendChild(UE.uNode.createText(c));
                }
                pre.appendChild(UE.uNode.createElement('br'))
            })
       })
    });

接着找:

me.addOutputRule(function(root){
        utils.each(root.getNodesByTagName('pre'),function(pre){
            var code = '';
            utils.each(pre.children,function(n){
               if(n.type == 'text'){
                   //在ie下文本内容有可能末尾带有\n要去掉
                   //trace:3396
                   code += n.data.replace(/[ ]/g,' ').replace(/\n$/,'');
               }else{
                   if(n.tagName == 'br'){
                       code  += '\n'
                   }else{
                       code += (!dtd.$empty[n.tagName] ? '' : n.innerText());
                   }

               }

            });

同样把pre改为code即可

me.addOutputRule(function(root){
        utils.each(root.getNodesByTagName('code'),function(pre){
            var code = '';
            utils.each(pre.children,function(n){
               if(n.type == 'text'){
                   //在ie下文本内容有可能末尾带有\n要去掉
                   //trace:3396
                   code += n.data.replace(/[ ]/g,' ').replace(/\n$/,'');
               }else{
                   if(n.tagName == 'br'){
                       code  += '\n'
                   }else{
                       code += (!dtd.$empty[n.tagName] ? '' : n.innerText());
                   }

               }

            });

转载原创文章请注明,转载自: 斐斐のBlog » 使用HighlightJS高亮UEditor代码段
评论已关闭