我爱学习网首页 | 设为首页 | 收藏本站 | 网站地图 您好,欢迎光临我爱学习网
我爱学习网

当前位置:首页 > 编程开发 > dedecms织梦 >

dedecms5.7下利用SyntaxHighlighter插件实现代码高亮

时间:2014-01-28 15:06 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响
1、本代码高亮是基于SyntaxHighlighter插件的,您可以首先去SyntaxHighlighter官方网站下载 http://alexgorbatchev.com/SyntaxHighlighter/download/,建议下载2.1版本,貌似大家都说3.0版本的不支持自动换行,这里使用的是2.1.382版本。将下载的文件解压在syntaxHighlight文件夹里,去除里面无用的文件,只留下scripts和styles文件夹。
 
2、其它的费话就不多说了。直入主题。这一份是我整理好的插件,下载即可用。http://pan.baidu.com/s/1sj96Z4h 将插件解压至:/include/ckeditor/plugins/目录下。
 
3、由于dedecms 5.7自己集成了一个dedepage插件,用来添加ckeditor自定义插件,在include/ckeditor/plugins/dedepage文件夹下,打开plugin.js文件大概在28行找到代码requires : [ 'fakeobjects' ],在后面加入requires : [ 'syntaxhighlight' ],其中syntaxhighlight为代码高亮插件的文件夹名,添加完之后的代码如下:
// Register a plugin named "dedepage".
(function()
{
    CKEDITOR.plugins.add( 'dedepage',
    {
        init : function( editor )
        {
         ...
            editor.ui.addButton( 'MyPage',
            {
                label : '插入分页符',
                command : 'dedepage',
                icon: 'images/dedepage.gif'
            });
            // alert(editor.name);
        },
        requires : [ 'fakeobjects' ],
	requires : [ 'syntaxhighlight' ]
    });
})();


4、修改include/ckeditor/ckeditor.inc.php文件,在$toolbar['Basic']的最后一行添加元素Code,修改后代码如下:
$toolbar['Basic'] = array(
            array( 'Source','-','Templates'),
            array( 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'),
            array( 'Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'),
            array( 'ShowBlocks'),array('Image','Flash','Addon'),array('Maximize'),'/',
            array( 'Bold','Italic','Underline','Strike','-'),
            array( 'NumberedList','BulletedList','-','Outdent','Indent','Blockquote'),
            array( 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
            array( 'Table','HorizontalRule','Smiley','SpecialChar'),
            array( 'Link','Unlink','Anchor'),'/',
            array( 'Styles','Format','Font','FontSize'),
            array( 'TextColor', 'BGColor', 'MyPage','MultiPic','Code')
        );

5、修改内容页模板article_article.htm,在</body>前面添加以下代码:
<script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/ckeditor/plugins/syntaxhighlight/code.js" ></script>
<link type="text/css" rel="stylesheet" href="{dede:global.cfg_cmsurl/}/include/ckeditor/plugins/syntaxhighlight/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="{dede:global.cfg_cmsurl/}/include/ckeditor/plugins/syntaxhighlight/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '{dede:global.cfg_cmsurl/}/include/ckeditor/plugins/syntaxhighlight/scripts/clipboard.swf';
SyntaxHighlighter.config.strings.expandSource = 'show source';
SyntaxHighlighter.config.strings.viewSource = '源码';
SyntaxHighlighter.config.strings.copyToClipboard = '复制';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation = '代码在你的剪贴板,快去粘贴吧!';
SyntaxHighlighter.config.strings.print = '打印';
SyntaxHighlighter.config.strings.help = '帮助';
SyntaxHighlighter.config.strings.alert = '我爱学习网很高兴地告诉你:\n\n';
SyntaxHighlighter.all();
</script>

6、到这一步,编辑器的修改已经完成。
代码高亮后,如果利用dedecms文档关键词给文章自己加关键词链接,高亮后的代码中如果有关键词链 接,SyntaxHighlighter直接显示源码(<a href='$key_url' target='_blank'><u>$key</u></a>),请看下面11步骤
 
7. 在dedecms文章页自动添加关键词内链锚文本php文件include/arc.archives.class.php加入如下规则(1213行,//恢复超链接 的下一行):
$body = preg_replace("#<pre class=\"brush:(.*)\">(.*)(<a(.*))><u>(.*)<\/u><\/a>(.*)<\/pre>#isU", '<pre class="brush:\\1">\\2\\5\\6</pre>', $body);

(责任编辑:我爱学习网)


分享到: 更多