ecms帝国默认编辑器fckeditor添加代码高亮插件(图文)

下面介绍一下帝国ecms编辑器如何添加代码高亮 这里使用syntaxhighlighter

代码高亮让编辑的代码片段显示更加清楚

本文使用syntaxhighlighter_3.0.83无须在引人过多的js文件,

syntaxhighlighter_3.0.83官方下载地址是:http://alexgorbatchev.com/SyntaxHighlighter/

下面介绍一下添加插件方法

1.从网盘中下载所需要的文件ecms帝国编辑器添加代码高亮.zip,文件清单如下图:

ecms帝国默认编辑器fckeditor添加代码高亮插件1

2.上传syntaxhighlighter文件夹到服务器系统根目录,把下面内容添加到内容模板里面

<!--syntaxhighlighter start -->
<script type="text/javascript" src="[!--news.url--]syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="[!--news.url--]syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="[!--news.url--]syntaxhighlighter/styles/shCoreDefault.css"/>
<!--syntaxhighlighter end -->

3.把syntaxhighlight2这个文件夹上传到e/admin/ecmseditor/infoeditor/editor/plugins&rdquo;目录下,作为FCK编辑器的一个插件。

4.修改一下FCK编辑器的配置文件,需要编辑器添加一下插件和按钮。

后台配置文件路径:/e/admin/ecmseditor/infoeditor/fckconfig.js

前台配置文件路径:/e/data/ecmseditor/infoeditor/fckconfig.js

找到FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;    
大概在51行在下面插入代码如下:

FCKConfig.Plugins.Add('syntaxhighlight2', 'en');
// default language options:
// c++,csharp,css,delphi,java,jscript,php,python,ruby,sql,vb,xhtml
FCKConfig.SyntaxHighlight2LangDefault = 'java';

这样就完成了编辑器就会出现如下图的小图标

ecms帝国默认编辑器fckeditor添加代码高亮插件2

点击最后一个小图标 输入要插入的代码片段即可,最终显示效果如下

ecms帝国默认编辑器fckeditor添加代码高亮插件3

来源://作者:/更新时间:2015-03-22
相关文章
评论:
验证码:
匿名评论: