本文实例讲述了CKEditor 4.1.1添加代码高亮显示插件功能。分享给大家供大家参考,具体如下:
随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了代码片段这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以前都是使用网友自己开发的代码高亮插件。下面就来介绍如何使用代码片段这个代码高亮插件。本文还介绍了CKEditor中如何安插装代码片段件。
-
<李> CKEditor 4.4的更新详情:http://ckeditor.com/whatsnew
<李> CKEditor官方对代码高亮插件代码片段的文档:https://docs.ckeditor.com/# !/指导/dev_codesnippet李
<李>代码片段的下载地址:http://ckeditor.com/addon/codesnippet
李
代码片段是CKEditor4.4.1的新插件,主要提供添加代码片段高亮显示的功能。另外注意一点的是,代码片段只是作为CKEditor的插件,真正实现代码高亮的是highlight.js这个代码高亮JS库。
代码片段只是将highlight.js作为默认的高亮库,由于亮点。js已经集成在代码片段中,所以我们在使用CKEditor时候是不需要另外再引用highlight.js这个库。(点击这里查看highlight.js的官方网站)。
以前的CKEditor版本由于没有比较好的代码高亮插件,都是自己自定义插件,当时用的是SyntaxHighlighter这个代码高亮库。大家也可网上搜下SyntaxHighlighter的资料
添加代码片段的方法很简单,不过由于版本兼容问题,目前官网上这个插件对4.4兼容最好,其他兼容则未进行测试,所以使用这个插件最好是将CKEditor升级到4.1.1。
如果已经熟悉CKEditor的插件机制,那么我们只要到官网上将代码片段下载下来(下载地址见文章顶部),将里面的整个文件夹解压到CKEditor文件夹下的插件文件夹内。
CKEDITOR。editorConfig=函数(配置){//添加插件,多个插件用逗号隔开
配置。extraPlugins=癱odesnippet”;//使用zenburn的代码高亮风格样式PS: zenburn效果就是黑色背景//如果不设置着默认风格为违约
配置。codeSnippet_theme=皕enburn”;
}
之前
也可以在编辑器初始化的使用下面代码添加高亮插件:
这里有一点需要注意,如果按照上面添加插件的步骤而出现下面这两个错误:
-
<李>
<李>
这是因为下载的CKEditor缺少部件和lineutils插件,到官网将这两个插件下载下来,只要将这两个插件解压到CKEditor文件夹下的插件文件夹内就可以了。一般是先出现第一个部件插件无法找到的错误,添加了小部件插件后才会出现第二个找不到lineutils插件的错误,可见代码片段需要依靠这两个插件。这两个插件的下载地址如下:
-
<李> http://ckeditor.com/addon/widget
<李> http://ckeditor.com/addon/lineutils
李
还有最简单的方式,首先打开代码片段下载地址,将插件添加到自定义CKEditor编辑器
