文章类型: 工具大全
关键词: UEditor,SyntaxHighlighter,百度,baidu,代码高亮
内容摘要: 对应百度提供的UEditor中的高亮代码显示SyntaxHighlighter,代码比较老旧,这里进行了升级

升级UEditor的SyntaxHighlighter

2015/7/29 12:27:50    来源:apple    阅读:

博客文本编辑器使用的是UEditor1.4.3,和Bootstrap还有点不兼容,代码高亮功能看起来好丑,这是UEditor默认的语法高亮:

1.jpg

本来想将就用的,可又遇到了代码太长自动换行时行号错乱的问题,于是看了下自带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文件,增加语法高亮设置:

/*!
 * 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

下面附SyntaxHighlighter最新版本 v3.0.83以及我已经改写好的代码附件,如下:

源最新版本:源最新版本   访问密码 567d

改写版本:改写版本  访问密码 f409


↑ 上一篇文章:检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法 关键词:检测,集成,托管,管道,模式,不适用,ASP.NET设置.. 发布日期:2015/7/29 12:25:57
↓ 下一篇文章:使用邮件发送来解决用户注册和找回密码的实现思路 关键词:.NET,C#,邮件发送,用户注册,找回密码,实现思路 发布日期:2015/7/29 12:30:28
相关文章:
关于百度富文本编辑器ueditor的.NET版本地图片上传提示uploader类同时存在于两个dll中的解决方法 关键词:百度,富文本编辑器,ueditor,.NET,Uploader类型同时存在两个dll中,uplo.. 发布日期:2016-05-15 00:01
C#实现百度站长平台_链接提交_主动提交推送的POST推送功能 关键词:C#,百度,站长平台,链接提交,主动推送,POST推送 发布日期:2016-01-23 12:37
百度搜索引擎网页质量白皮书 关键词:百度,搜索,引擎,网页,质量,白皮书,SEO 发布日期:2015-12-25 15:55
相关目录:.NETJAVA软件开发ANDROID工具大全资料分享
我要评论
正在加载评论信息......