PHPCMS V9 编辑器实现代码高亮显示-最详细说明

PHPCMS V9 是国内难得优质CMS系统,用它制作一些门户站会大大提高开发效率,最近笔者用其制作了一个个人网站,有的时候也会插入一下代码什么的,所以研究可以一下编辑器代码高亮,网上搜索了一大堆,都说的不是很清楚,在这里整理一下,供大家参考,也给自己做个备忘!
效果预览:

第一步:准备文件

需要文件下载地址:点击去下载
下载完成之后直接解压上传至:statics/js/ckeditor/syntaxhighlight

第二步:修改改“ckeditor.js”文件

该文件路径:statics/js/ckeditor/ckeditor.js,
第一处:可以用dw打开查找“wysiwygarea,wsc”,在后面插入“,syntaxhighlight”
undo,wysiwygarea,wsc,syntaxhighlight’,extraPlugins:”,removePlugins:”,protectedSource:[],tabIndex:0,theme:’default’,skin:’kama’,width:”,baseFloatZIndex:10000
第二处:还是用dw查找该文件,查找“’ShowBlocks’,’-‘,’About’”,在后面插入:“,’syntaxhighlight’”
[‘Image’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’,’PageBreak’],’/’,[‘Styles’,’Format’,’Font’,’FontSize’],[‘TextColor’,’BGColor’],[‘Maximize’,’ShowBlocks’,’-‘,’About’,’syntaxhighlight’]]

第三步:修改V9表单类文件:Form.class.php

该文件路径:phpcms/libs/classes/Form.class.php,查找:“[‘TextColor’,’BGColor’]”,在后面插入:“[‘syntaxhighlight’],”
[‘Styles’,’Format’,’Font’,’FontSize’],
[‘TextColor’,’BGColor’],
[‘syntaxhighlight’],
[‘attachment’],rn”;
至此编辑器上已经出现插入代码的按钮:

第四步:在需要显示代码的页面(一般为文章详情页面,也就是show_***.html)

在页面的头部调用高亮插件的样式文件和初始化文件,可以直接复制一下代码:

<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shCore.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushBash.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushCpp.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushCSharp.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushCss.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushDelphi.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushDiff.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushGroovy.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushJava.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushJScript.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushPhp.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushPlain.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushPython.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushRuby.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushScala.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushSql.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushVb.js”></script>
<script type=”text/javascript” src=”{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/shBrushXml.js”></script>
<link type=”text/css” rel=”stylesheet” href=”{JS_PATH}ckeditor/plugins/syntaxhighlight/styles/shCore.css”/>
<link type=”text/css” rel=”stylesheet” href=”{JS_PATH}ckeditor/plugins/syntaxhighlight/styles/shThemeDefault.css”/>
<script type=”text/javascript”>
SyntaxHighlighter.config.clipboardSwf = ‘{JS_PATH}ckeditor/plugins/syntaxhighlight/scripts/clipboard.swf’;
SyntaxHighlighter.all();
</script>

以上四步做完之后就可以实现高亮功能了

 

本文固定链接: http://www.ccsbbs.com.cn/archives/7048.html | 极限手指

该日志由 极限手指 于2013年08月02日发表在 PHP 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: PHPCMS V9 编辑器实现代码高亮显示-最详细说明 | 极限手指
关键字:

PHPCMS V9 编辑器实现代码高亮显示-最详细说明:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!