Fork me on GitHub

升级UEditor的SyntaxHighlighter

博客文本编辑器使用的是UEditor1.4.3,和Bootstrap还有不兼容,语法高亮效果也很差,于是看了下自带SyntaxHighlighter的版本,竟然是1.5.1的,而且js文件有160kb。官网SyntaxHighlighter最新版本已经更新到3.0.83了,于是准备给UEditor的SyntaxHighlighter升下级。

升级SynTaxHighlighter

一、下载

  • 首先下载SyntaxHighlighter最新版,解压。
  • 将scripts目录下的js压缩成一个文件(注意:shCore.js这个核心文件要放在最前面),我这里压缩为shCore.min.js。
  • styles目录中的文件包含基本样式shCore.css,主题基本样式shCoreXX.css以及其对应主题样式shThemeXX.css,我把每个主题与基本样式压缩成一个主题样式shCoreXX.min.css,8个主题,这里生成了8个文件。

二、修改UEditor

  • 将上面生成的9个文件复制到UEditor目录下third-party/SyntaxHighlighter/目录中,并修改UEditor目录下的 ueditor.parse.js 文件,将 sh_js属性 设置为 shCore.min.js 增加语法高亮设置:
    /*!
     * UEditor
     * version: ueditor
     * build: Thu May 29 2014 16:47:49 GMT+0800 (中国标准时间)
     */
     
    (function(){
        (function(){
        UE = window.UE || {};
        //语法高亮设置
        UE.sh_config = {
            sh_js : "shCore.min.js",
            sh_theme : "Default"
        };
        var isIE = !!window.ActiveXObject;
        //定义utils工具
       var utils = {
  • 并修改加载SyntaxHighlighter的文件名:
UE.parse.register('insertcode',function(utils){
    var pres = this.root.getElementsByTagName('pre');
    if(pres.length){
        if(typeof XRegExp == "undefined"){
            var jsurl,cssurl;
            if(this.rootPath !== undefined){
                jsurl = utils.removeLastbs(this.rootPath)  + '/third-party/SyntaxHighlighter/'+UE.sh_config.sh_js;
                cssurl = utils.removeLastbs(this.rootPath) + '/third-party/SyntaxHighlighter/shCore'+UE.sh_config.sh_theme+'.min.css';
            }else{
                jsurl = this.highlightJsUrl;
                cssurl = this.highlightCssUrl;
            }

然后就修改完成啦,再将文件压缩一下就可以了。

三、使用方法

依然保持UEditor原来的使用方法,编辑内容展示,增加了两个可选配置,语法解析文件和高亮主题:

<script>
    UE.sh_config.sh_js="shCore.min.js";    //语法解析文件
    UE.sh_config.sh_theme="Default";    //语法高亮主题
    uParse(".article-content",{rootPath: "/js/ueditor"});
</script>

一共有8种主题可选:Default,Django,Eclipse,Emacs,FadeToGrey,MDUltra,Midnight,RDark

效果

Midnight:

1408548337165875.jpg

RDark:

1408548337540451.jpg

Default:

1408548339694916.jpg

标签: ueditor

仅有一条评论

  1. 1 1

    wget

添加新评论