CKeditor與syntaxhighlight打造joomla代碼高亮

更新時(shí)間：2010年07月04日 21:59:41 作者：

最近在用csdn和cnblogs發(fā)帖子和寫隨筆的時(shí)候，發(fā)現(xiàn)了好多的IT的網(wǎng)站或者和代碼有關(guān)系的一些論壇，博客之類，他們都有一個(gè)非常好的語法高亮！很強(qiáng)大！

（效果如圖所示?。?/P>

看了這兒效果很不錯(cuò)的，因?yàn)?，自己也用joomla建了小小的消遣的站點(diǎn)！經(jīng)常也會貼一些代碼什么的，沒有一個(gè)“語法高亮的”功能，總感覺不是很方便的！所以，昨天晚上，費(fèi)了好多功夫，終于解決了這個(gè)問題！

現(xiàn)在就記錄一下吧！

首先joomla默認(rèn)的編輯器是tinymce貌似和博客園后臺也用這個(gè)編輯器！淡然，他就是沒有語法高亮的功能！

而我在百度和google上也是有這樣的編輯器好像是joomlagate出的，當(dāng)讓那樣的插件是要贊助會員才能下載的！當(dāng)然我下載不了！

于是，就想自己實(shí)現(xiàn)一下，用tinymce+syntaxhighlight來實(shí)現(xiàn)，只是，可能是對tinymce用的比較少，他的配置文件什么等等都不是很熟悉，所以也沒有成功！

于是，就轉(zhuǎn)到了一個(gè)自己用的比較多的開源編輯器ckeditor！這個(gè)我想不用作多解釋了吧！fckeditor的升級版！

好了，說了一大堆廢話！

下面正式開始！

首先的本人joomla版本是1.5.9

然后下載joomla ckeditor版本！這個(gè)我會在最后附上下載地址！其實(shí)就是syntaxhighlight插件，這個(gè)我也會附上，當(dāng)然您也可以自己去官網(wǎng)下載最新的！

然后就是修改了，

首先是先將ckeditor插件在joomla上安裝好了之后，會發(fā)現(xiàn)在根目錄-》plugins-》editors-》ckeditor-》plugins下目錄！就將syntaxhighlight加壓好之后上傳到該目錄下，當(dāng)然該目錄下都是ckeditor下會用到的一下插件！您對比一下就可以，知道上傳什么內(nèi)容了，這個(gè)就不多說了！問題不大！

其次就是要在要在ckeditor上裝上code按鍵！如下圖所示，最后一個(gè)！

當(dāng)然這個(gè)就是有去修改ckeditor的配置文件了?。ㄆ鋵?shí)您自己搜索ckeditor+syntaxhighlight也是可以找到這樣的方法的）只是，joomla版的ckeditor有點(diǎn)區(qū)別，改“config.js”文件是沒有用的，要改“ckeditor.js”文件，這個(gè)文件打開一看里面的代碼一大堆，當(dāng)然不用急，只要該幾處就可以了！

下面貼出要改的地方?。ńㄗh可以用Dreamweaver打開該文件，這樣速度會快點(diǎn)尤其是查找）
第一處js代碼

復(fù)制代碼代碼如下:

 
',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代碼

復(fù)制代碼代碼如下:

 
<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']] 

就這兩處既可以了，就是代碼的最后部分，你可以在里面復(fù)制一個(gè)單詞查找一下就可以了，就是加上“syntaxhighlight”，看到“syntaxhighlight”這個(gè)單詞在我貼出來的代碼的位置和您自己ckeditor中的位置比較一下就知道了！

然后這兩段代碼修改完了之后，去后臺發(fā)布下文章發(fā)現(xiàn)這個(gè)按鍵已近上去了，就是和我的第一張截圖一樣了！這樣就可以插入使用了！

當(dāng)然，最后一步就是在前臺加入js+css樣式來控制語法高亮的代碼了！

這個(gè)就是修改模板文件里面的html頁面了，下面貼出我的代碼！

因?yàn)槲矣玫氖亲詭У摹癹a_purity”模板，所以打開html頁面開始部分如下所示

復(fù)制代碼代碼如下:

 
<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文件對應(yīng)一種代碼的語法高亮，我就加了，我會用到的幾種，比如php，c#，XML，Js等等，不會用到的就沒加！

怕影響加載速度！呵呵！

這樣的，基本上OK了！自己發(fā)表測試吧！我就是這樣完成的！

當(dāng)然其中有很多是參考別人的！尤其是附件我也是用的別人發(fā)布的！現(xiàn)在共享一下！
CKEditor3.x-SyntaxHighlight.rar

您可能感興趣的文章: