修改ueditor加载自定义SyntaxHighlighter

仅是博主使用ueditor的一点经验。

遇到问题:使用代码高亮时如果遇到代码过长则无法换行,而是把区域顶出容器外。


解决办法:替换官网SyntaxHighlighter最新版本的,我使用的是3.0.83版本。

具体方法如下:

1.从官网下载最新版的插件并放到项目目录下,官网下载地址

http://alexgorbatchev.com/SyntaxHighlighter/

2.修改百度的ueditor.parse.js文件如下部分,注释掉下面被注释的内容

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/shCore.js';
                cssurl = utils.removeLastbs(this.rootPath) + '/third-party/SyntaxHighlighter/shCoreDefault.css';
            }else{
                jsurl = this.highlightJsUrl;
                cssurl = this.highlightCssUrl;
            }
            utils.loadFile(document,{
                id : "syntaxhighlighter_css",
                tag : "link",
                rel : "stylesheet",
                type : "text/css",
                href : cssurl
            });
            utils.loadFile(document,{
                id : "syntaxhighlighter_js",
                src : jsurl,
                tag : "script",
                type : "text/javascript",
                defer : "defer"
            },function(){
                utils.each(pres,function(pi){
                    if(pi && /brush/i.test(pi.className)){
                        SyntaxHighlighter.highlight(pi);
                    }
                });
            });
        }else{
            utils.each(pres,function(pi){
                if(pi && /brush/i.test(pi.className)){
                    SyntaxHighlighter.highlight(pi);
                }
            });
        }
    }
		*/
});

3.在需要高亮的页面添加自己的高亮插件代码,建议添加到body的最后,其中js路径根据自己的项目路径替换为自己的

<script type="text/javascript" src="static/plugin/syntaxhighlighter/3.0.83/scripts/shCore.js"></script>    
<script type="text/javascript" src="static/plugin/syntaxhighlighter/3.0.83/scripts/shAutoloader.js"></script>    
<link type="text/css" rel="stylesheet" href="static/plugin/syntaxhighlighter/3.0.83/styles/shCoreDefault.css"/>    
<style type="text/css">   
/* 修改默认样式,隐藏竖向滚动条,设置字体为13px */ 
.syntaxhighlighter {    
overflow-y: hidden !important;    
overflow-x: auto !important;    
font-size: 13px !important;    
}    
</style>    
<script type="text/javascript">    
function path() {    
var args = arguments,    
result = [];    
for (var i = 0; i < args.length; i++)    
result.push(args[i].replace('$', 'static/plugin/syntaxhighlighter/3.0.83/scripts/'));    
return result;    
}    
SyntaxHighlighter.autoloader.apply(null, path(    
		'applescript            $shBrushAppleScript.js',    
		'actionscript3 as3      $shBrushAS3.js',    
		'bash shell             $shBrushBash.js',    
		'coldfusion cf          $shBrushColdFusion.js',    
		'cpp c                  $shBrushCpp.js',    
		'c# c-sharp csharp      $shBrushCSharp.js',    
		'css                    $shBrushCss.js',    
		'delphi pascal          $shBrushDelphi.js',    
		'diff patch pas         $shBrushDiff.js',    
		'erl erlang             $shBrushErlang.js',    
		'groovy                 $shBrushGroovy.js',    
		'java                   $shBrushJava.js',    
		'jfx javafx             $shBrushJavaFX.js',    
		'js jscript javascript  $shBrushJScript.js',    
		'perl pl                $shBrushPerl.js',    
		'php                    $shBrushPhp.js',    
		'text plain             $shBrushPlain.js',    
		'py python              $shBrushPython.js',    
		'ruby rails ror rb      $shBrushRuby.js',    
		'sass scss              $shBrushSass.js',    
		'scala                  $shBrushScala.js',    
		'sql                    $shBrushSql.js',    
		'vb vbnet               $shBrushVb.js',    
		'xml xhtml xslt html    $shBrushXml.js'));    
	SyntaxHighlighter.all();    
</script>

基本思路就是:屏蔽百度的高亮插件加载,在页面添加自己的高亮插件。

提交评论