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

时间: 2024-12-27 05:06:49

CKeditor与syntaxhighlight打造joomla代码高亮_网页编辑器的相关文章

Windows Live Writer 实现代码高亮_网页编辑器

为了实现代码高亮,之前找了很多插件,但是效果都不是很理想.经过研究终于找到一个完美的解决方案,这个解决方案具有如下优点: 代码简洁,用<pre>标签实现代码高亮,不会生成太多Html标签. 支持多种语言,包括c#,c++,php,python等10多种语言. 扩充方便,可以通过简单二次开发实现对其它语言的支持. 使用方便,把代码复制到代码高亮转换窗口即可. 下面一步步介绍如何配置WLW+wordpress的代码高亮解决方案: 1.准备工作: 下载 precode code snippet ma

fckeditor 代码语法高亮_网页编辑器

先是IE: 1.遗留的问题:隐藏的源码和格式化后的代码有会有问题. 经上次研究的结果,两处的代码有可能不对,主要是HTML的特别代码,像代码里有标签<div>,JavaScript代码里有&alt等.这里的解决方法很简单:只要替换一下就可以了,不过要注意,在进行格式化之前就进行替换.因为隐藏的代码也是要替换的,最后取的时候也要替换回去,但是要反顺序.代码如下: 复制代码 代码如下: .replace(/&/g, "&") .replace(/<

关于CKeditor的非主流个性应用的设置_网页编辑器

CKeditor,以前叫FCKeditor,已经使用过好多年了,功能自然没的说.最近升级到3.0版,好像重写了代码,所以构建的方式也有了些变化,应该说是更简单了. 相关地址: 官方网站:http://ckeditor.com/ 下载地址:http://ckeditor.com/download CKfinder:http://ckfinder.com/ 用于上传的插件(有四种语言版本,根据需要下载) 部署: 将CKeditor下载下来,解压网站/ckeditor/下面(当然名字可以修改,只是需要

ckeditor的使用和配置方法分享_网页编辑器

一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea id="TextArea1" cols="20" rows=&quo

CKEditor 取消转义的两种方法_网页编辑器

话说程序员的博客总是用到SyntaxHighlighter之类的来在pre标签里贴一堆代码.于是因为装了CKEditor for WordPress就一直觉得很讨厌,在HTML标签里写下一些代码,到了Visual里就被转义了.比如>和<就变成了><虾米虾米的.话说今天心血来潮去Google了一下,CKEditor的设置文档里还真的有相关的设置,请围观这里! 配置ckeditor插件目录下的ckeditor.config.js文件,加入下面这行. 复制代码 代码如下: config.

Js FCKeditor的值获取和修改的代码小结_网页编辑器

利用Javascript取和设FCKeditor值也是非常容易的,如下: // 获取编辑器中HTML内容 function getEditorHTMLContents(EditorName) { var oEditor = FCKeditorAPI.GetInstance(EditorName); return(oEditor.GetXHTML(true)); } // 获取编辑器中文字内容 function getEditorTextContents(EditorName) { var oEd

ckeditor syntaxhighlighter代码高亮插件配置分享_网页编辑器

最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器(ckeditor)了,我和必再去费这等功夫呢!有现成的,拿过用就是的呗!正所谓的拿来主义!不过这个在线文本编辑器,对于我们程序员来说有一个算是缺陷吧!没有代码高亮的功能!这样把代码贴上去,很不好看!今天晚上,我总是把他给弄出来了.当然也采在别人的肩膀上做成的.在此感谢他们的分享!费话不多说了!咱们进入正题吧! 首先去官方网站下载个ckeditor 其次

SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色_网页编辑器

上网搜索了一下相关的文章不少,大同小异,本人一直使用的是CKeditor的文字编辑器,所以偿试使用网上很多网友介绍的SyntaxHighlighter配合CKEditor插件的方式实现.可能是因为SyntaxHighlighter和CKEditor版本不同,过程中遇到了一些问题,解决的同时也根据个人理解做部分调整,所以本文所描述的方法仅供参考. 一.SyntaxHighlighter简介 SyntaxHighlighter(原名:dp.SyntaxHighlighter)是一套在浏览器上对各种代

FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合_网页编辑器

Introduction(简介) This is a dialog-based plugin to handle formatting of source code for FCKeditor 2.5.x. It WON'T work with the new CKEditor (yet).(CKEditor 是FCKEditor 的升级版,不过,SyntaxHighlighter 还不能在 CKEditor 中实现代码高亮) It makes use of the SyntaxHighligh