Keep on going, never give up.

FCKeditor整合SyntaxHighlighter高亮插件

昨晚把SyntaxHighlighter整合进FCKeditor,由于网上的SyntaxHighlighter高亮插件,要么是经过转换后的"一堆多余"代码,要么就是调用FCKeditor目录下Plugins下的JS脚本导致网页路径太长。再加上天缘使用自己的博客系统,所以每需要一个插件都要自己整合,还好不是太难,摸索调整一下就进FCKeditor插件里了(最新版本2.6.6),在Firefox下测试可用,效果参见本页代码部分。

一、高亮参考源插件及修改说明

1、Highlighter整合进FCKeditor

来源地址Kend's Blog,不过他(她)用的是dp.SyntaxHighlighter。修改说明:

A、dp.SyntaxHighlighter更换为下面的SyntaxHighlighter。

B、Javascript脚本位置调用修改为根目录,不再到FCKeditor目录下调用,为了简单,把所有JS全部写到一个字符串里了*_*,创建element太罗嗦了。

C、删除全部的文件只剩下三个:1个.js、1个html和1个logo文件。

2、SyntaxHighlighter

来源地址:http://alexgorbatchev.com/,这个插件是自整合调用,方法自己定,所以天缘就把他们两个给结合起来了,刚刚在Firefox下测试通过,其它细节问题稍后再修正完善,修改说明如下:

A、原CSS调用分成两个部分,天缘把核心CSS和缺省主题给合并成一个,减少调用次数。

B、原文件组合不同目录,修改后只留下主要文件,且全部放到同一个code目录下。

二、高亮插件修改及注册

1、dp.SyntaxHighlighter插件修改

删除剩下的三个文件,需修改多个路径地方及双击编辑代码部分,这里不再列出,,大家可以直接看下面下载后代码,时间关系,很多代码未优化,够用就不再折腾了。

2、高亮插件注册部分

在FCKeditor/fckconfig.js中,增加插件注册和工具栏注册两项,修改参考如下:

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;
FCKConfig.Plugins.Add( 'SyntaxHighlighter', 'zh-cn,en' ) ;//增加高亮插件注册
.
.
.
FCKConfig.AutoDetectLanguage	= false ;//禁止自动检测语言
FCKConfig.DefaultLanguage		= 'zh-cn' ;//默认显示中文语言

.
.
.
FCKConfig.ToolbarSets["Default"] = [
	['PasteText','SyntaxHighlighter','Find','Replace','RemoveFormat'],
] ;//添加到工具栏,位置自己选择

3、下载高亮插件

下载插件:点击下载,下载解压后有两个目录:

一个是JS目录,把JS目录拷贝到网站的跟目录下即可(如果带子域名相应调整)。

一个是SyntaxHighlighter目录,把SyntaxHighlighter拷贝到FCKeditor/plugins下面。

4、清空缓存后台测试

然后上传,再次进入FCKeditor编辑模式,可以看到SyntaxHighlighter已经生效,而且支持双击编辑,具体事例参考本页面源码。 

更多文章:

十款WordPress高亮插件比较及示例样式

建站基础:WordPress安装教程图解

边栏改版:网站博客边栏是右侧好还是左侧好

网站基础:URL伪静态化概念与常见方法

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.