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

(0)

相关推荐

  • joomla内置的表单验证功能使用方法

    以下说一下使用方法: 在要使用表单功能的页面的最上面输入如下代码 JHTML::_('behavior.formvalidation'); 然后把如下脚本加入页面上 复制代码 代码如下: <script type="text/javascript"> function formValidate(f) { if (document.formvalidator.isValid(f)) { f.check.value='<?php echo JUtility::getTok

  • Joomla使用Apache重写模式的方法

    本文实例讲述了Joomla使用Apache重写模式的方法.分享给大家供大家参考,具体如下: 开启"使用Apache的重写模式:mod_rewrite"你要先做两件事,否则你的网站将不能正常使用. 将Joomla安装目录下的htaccess.txt文件重命名为.htaccess 方法1:如何你使用windows系统,那么安装notepad++,然后用他打开htaccess.txt,另存为.htaccess. 方法2:开始 - 运行 - 输入"cmd" ,打开命令行工具

  • Joomla语言翻译类Jtext用法分析

    本文实例讲述了Joomla语言翻译类Jtext用法.分享给大家供大家参考,具体如下: 基本使用方法: Jtext是Joomla中实现多语言翻译的一个对象,最基本的使用方法如下: Jtext::_('LANGUAGE CODE'); 如果是作为变量的话,则直接使用,如: $var = Jtext::_('LANGUAGE CODE'); 如果需要显示出来,可以用echo的命令让它显示,这种方式在模板文件中是最常见的,如: echo Jtext::_('LANGUAGE CODE'); 语言包文件:

  • Joomla调用系统自带编辑器的实现方法

    本文实例讲述了Joomla调用系统自带编辑器的方法.分享给大家供大家参考,具体如下: 调用Joomla系统带的编辑器: 路径: /libraries/joomla/html/editor.php 类:JEditor 函数: void display( string $name, string $html, string $width, string $height, int $col, int $row, [boolean $buttons = true], [string $id = null

  • joomla数据库操作示例代码

    本文实例讲述了joomla数据库操作的方法.分享给大家供大家参考,具体如下: 1.jTable $row =& JTable::getInstance('comment', 'Table'); $row->load($id); $row->bind(JRequest::get('post')) $row->store() 2.jModel $this->_db->setQuery($query); $this->_db->loadObject(); $th

  • 了解Joomla 这款来自国外的php网站管理系统

    过去建站一般都自定义开发,这需要技术性很高,而且代码不容易复用,别人也不容易维护,对于CMS来说,实在是没有必要自定义开发,因为CMS的基本功能并不多,很多功能都应该被复用.而joomla是一个完整的CMS,而且它最大特点是扩展性很好. 为什么说joomla扩展性好?你只要到joomla的官方网上找一找组件安装包,你就会看到有上千个组件安装可用,它们都实现各自的功能.如果你的CMS需要增加一个功能,在开发之前可先找一下安装包,这会省去不少功夫.有很多人为joomla开发组件安装包,那也是因为jo

  • Joomla数据库操作之JFactory::getDBO用法

    本文实例讲述了Joomla数据库操作之JFactory::getDBO用法.分享给大家供大家参考,具体如下: JFactory 是一个静态类,用来获取各种系统对象的引用 getDBO为取得数据库对象的方法,取得数据库连接对象代码: $db=& JFactory::getDBO(); 有了数据库对象那么就可进行数据库操作了,执行查询代码: <?php $db =& JFactory::getDBO(); $query = 'SELECT FirstName FROM #tablenam

  • Joomla开启SEF的方法

    本文实例讲述了Joomla开启SEF的方法.分享给大家供大家参考,具体如下: 使用SEF(search engine friendly)网址的主要目的是使内容的关键词出现在URL中,这也是我们常说的SEO中的一项重要内容,对于搜索引擎的来说,这样可以增强当前页面与这些关键词之间的关联度.下面我们来看看如何在Joomla 1.5中使用SEF网址. 1.安装Joomla1.5 2.在全局设置中(Global Configuration),将"搜索引擎优化网址(Search Engine Friend

  • joomla组件开发入门教程

    本文讲述了joomla组件开发知识点.分享给大家供大家参考,具体如下: 在你进行编码之前,有一些文件和文件夹需要创建和一些查询语句需要运行.你不但可以创建组件而且不用额外的配置就可以尝试不同的特性.你也可以看到Joomla!组织和访问组件方法的概况.最后,你会像其它组件一样加入工具栏. Joomla!组件的结构 Joomla!的所有组件都遵守指定的命名约定.每个系统组件都有唯一的名字,名字不要包括空格.代码分成两个文件夹,文件夹以com_开头,紧接着就是组件的名字.因此,你要创建两个相同名字的c

  • joomla实现注册用户添加新字段的方法

    本文实例讲述了joomla实现注册用户添加新字段的方法.分享给大家供大家参考,具体如下: joomla原来的注册很简单,为了添加自己想要的字段,比如电话. 在数据库添加这一字段"telphone" 修改libraries\joomla\database\table\user.php 在JTableUser这个类添加新的变量: var $telphone = null; 页面的修改 修改components\com_user\views\register\tmpl\default.php

  • Joomla简单判断用户是否登录的方法

    本文实例讲述了Joomla简单判断用户是否登录的方法.分享给大家供大家参考,具体如下: <?php if (isset($_SESSION['auth']["username"])) { echo "Welcome <a href='index.php?option=com_user&view=user&task=edit'>" . $_SESSION['auth']["username"] . "&l

  • Joomla实现组件中弹出一个模式(modal)窗口的方法

    本文实例讲述了Joomla实现组件中弹出一个模式(modal)窗口的方法.分享给大家供大家参考,具体如下: 最关键的JS在 /media/system/js/modal.js .有以下两种方式都可以实现,修改的都是扩展组件的模板文件default.php. 方式一: <?php JHTML::_('behavior.modal', 'a.modal');?> <a rel="{handler: 'iframe', size: {x: 570, y: 400}}" hr

随机推荐