平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“CKeditor与syntaxhighlight打造joomla代码高亮”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。
（效果如图所示！）
理解这一步时，最近在用csdn和cnblogs发帖子和写随笔的时候，发现了好多的IT的网站或者和代码有关系的一些论坛，博客之类，他们都有一个很好的语法高亮！很强大！
实际处理时，看了这儿效果很不错的，因为，自己也用joomla建了小小的消遣的站点！经常也会贴一些代码什么的，没有一个“语法高亮的”功能，总感觉不是很便于的！所以，昨天晚上，费了好多功夫，终于解决了这个问题！
现在就记录一下吧！
落到代码里，首先joomla默认的编辑器是tinymce貌似和博客园后台也用这个编辑器！淡然，他就是没有语法高亮的功能！
实际处理时，而我在百度和google上也是有这样的编辑器好像是joomlagate出的，当让那样的插件是要赞助会员才能下载的！当然我下载不了！
在这个场景下，于是，就想自己实现一下，用tinymce+syntaxhighlight来实现，只是，可能是对tinymce用的比较少，他的设置文件什么等等都不是很熟悉，所以也没有成功！
理解这一步时，于是，就转到了一个自己用的比较多的开源编辑器ckeditor！这个我想不用作多解释了吧！fckeditor的升级版！
好了，说了一大堆废话！
下面正式开始！
首先的本人joomla版本是1.5.9
实际处理时，随后下载joomla ckeditor版本！这个我会在最后附上下载地址！其实就是syntaxhighlight插件，这个我也会附上，当然您也能够自己去官网下载最新的！
然后就是修改了，
结合项目来看，首先是先将ckeditor插件在joomla上安装好了之后，会发现在根目录-》plugins-》editors-》ckeditor-》plugins下目录！就将syntaxhighlight加压好之后上传到该目录下，当然该目录下都是ckeditor下会用到的一下插件！您对比一下就能够，知道上传什么内容了，这个就不多说了！问题不大！
落到代码里，其次就是要在要在ckeditor上装上code按键！如下所示图所示，最后一个！
从实现思路看，当然这个就是有去修改ckeditor的设置文件了！（其实您自己搜索ckeditor+syntaxhighlight也是能够找到这样的方法的）只是，joomla版的ckeditor有点区别，改“config.js”文件是没有用的，要改“ckeditor.js”文件，这个文件打开一看里面的代码一大堆，当然不用急，只要该几处就能够了！
从实现思路看，下面贴出要改的地方！（建议能够用Dreamweaver打开该文件，这样速度会快点尤其是查找）
第一处js代码
复制代码 代码如下所示:
',fullPage:false,height:200,plugins:'about,basicstyles,blockquote,button,clipboard,colorbutton,contextmenu,elementspath,enterkey,entities,filebrowser,find,flash,font,format,forms,horizontalrule,htmldataprocessor,image,indent,justify,keystrokes,link,list,maximize,newpage,pagebreak,pastefromword,pastetext,popup,preview,print,removeformat,resize,save,scayt,smiley,showblocks,sourcearea,stylescombo,table,tabletools,specialchar,tab,templates,toolbar,undo,wysiwygarea,wsc,syntaxhighlight',extraPlugins:'',removePlugins:'',protectedSource:[],tabIndex:0,theme:'default',skin:'kama',width:'',baseFloatZIndex:10000
第二处js代码
复制代码 代码如下所示:
<span class="cke_separator"></span>');return{};}};i.toolbarLocation='top';i.toolbar_Basic=[['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];i.toolbar_Full=[['Source','-','Save','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],'/',['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],'/',['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['Maximize','ShowBlocks','-','About','syntaxhighlight']]
结合项目来看，就这两处既能够了，就是代码的最后部分，你能够在里面复制一个单词查找一下就能够了，就是加上“syntaxhighlight”，看到“syntaxhighlight”这个单词在我贴出来的代码的位置和您自己ckeditor中的位置比较一下就知道了！
理解这一步时，随后这两段代码修改完了之后，去后台发布下文章发现这个按键已近上去了，就是和我的第一张截图一样了！这样就能够插入采用了！
当然，最后一步就是在前台加入js+css样式来控制语法高亮的代码了！
这个就是修改模板文件里面的html页面了，下面贴出我的代码！
实际处理时，因为我用的是自带的“ja_purity”模板，所以打开html页面开始部分如下所示所示
复制代码 代码如下所示:
<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/styles/shThemeDefault.css"/>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.script.js"></script>
<?php if ($tmpTools->getParam('rightCollapsible')): ?>
<script language="javascript" type="text/javascript">
var rightCollapseDefault='<?php echo $tmpTools->getParam('rightCollapseDefault'); ?>';
var excludeModules='<?php echo $tmpTools->getParam('excludeModules'); ?>';
</script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.rightcol.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shCore.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushBash.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushPhp.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushColdFusion.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushCSharp.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushCss.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushJScript.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushXml.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/shBrushSql.js"></script>
<script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = '<?php echo $tmpTools->baseurl(); ?>plugins/editors/ckeditor/plugins/syntaxhighlight/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
<?php endif; ?>
从实现思路看，淡然，里面js部分比较多，没有js文件对应一种代码的语法高亮，我就加了，我会用到的几种，比如php，c#，XML，Js等等，不会用到的就没加！
怕影响加载速度！呵呵！
这样的，基本上OK了！自己发表测试吧！我就是这样完成的！
当然其中有很多是参考别人的！尤其是附件我也是用的别人发布的！现在共享一下！
CKEditor3.x-SyntaxHighlight.rar
您可能感兴趣的文章:
- FCKEditor SyntaxHighlighter整合实现代码高亮显示
- asp.net 为FCKeditor开发代码高亮插件实现代码
- 实际处理时，ckeditor syntaxhighlighter代码高亮插件，完美修复
- CKEditor中加入syntaxhighlighter代码高亮插件
- ckeditor syntaxhighlighter代码高亮插件设置分享
- FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合
- FCKeditor + SyntaxHighlighter 让代码高亮着色插件
- CKeditor富文本编辑器采用技巧之添加自定义插件的方法
- ckeditor自定义插件采用方法详解
- CKEditor 附插入代码的插件
- CKEditor 4.4.1 添加代码高亮显示插件功能教程【采用官方建议Code Snippet插件】