ckeditor增加编辑代码功能--使用官方推荐Code Snippet插件

     使用ckeditor这个编辑器的时候，对于经常写博客的同学当然希望能有 ，增加代码这个功能按钮，而这个按钮 需要自己配置， 我们的编辑器自然需要添加代码块的功能。
需要用到插件codesnippet，ckeditor（4.4版本对这个代码插件兼容比较好，建议用这个版本）的插件放在了/ckeditor/plugins/路径下。

codesnippet下载地址：https://ckeditor.com/cke4/addon/codesnippet

按上述操作下载安装之后打开/ckeditor/config.js 在里面添加codesnippet插件
 

CKEDITOR.editorConfig = function (config) {
    //添加插件，多个插件用逗号隔开
    config.extraPlugins = 'codesnippet';
    //使用zenburn的代码高亮风格样式 PS:zenburn效果就是黑色背景
    //如果不设置着默认风格为default
    config.codeSnippet_theme =  'zenburn';
}

CKEDITOR.resourceManager.load] Resource name "widget" was not found at"http://localhost:16577/Scripts/ckeditor/plugins/widget/plugin.js?t=
[CKEDITOR.resourceManager.load] Resource name "lineutils" was not found at "http://localhost:16577/Scripts/ckeditor/plug
CKEDITOR.resourceManager.load] Resource name "widgetselection" was not found at"http://localhost:16577/Scripts/ckeditor/plugins/widget/plugin.js?t=

这是因为下载的CKEditor缺少widget和lineutils插件，到官网将这几个插件下载下来，只要将这两个插件解压到ckeditor文件夹下的plugins文件夹内就可以了。一般是先出现第一个widget插件无法找到的错误，添加了widget插件后才会出现第二个找不到lineutils插件的错误，可见Code Snippet需要依靠这两个插件。这几个插件的下载地址如下：

1. http://ckeditor.com/addon/widget
2. https://ckeditor.com/addon/lineutils
3. https://ckeditor.com/cke4/addon/widgetselection

将下载的三个插件解压之后放到/ckeditor/plugins/路径下这样就完成了!
配置玩了之后记得清下缓存哦,浏览器缓存！

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/113/127.html

很赞哦！ (0)