CKEditor4.4.5 插入高度代码及上传图片

1.首先准备所需要的插件

（1）. CKEditor4.4.5 下载地址：http://ckeditor.com/download。如果不想下载直接引用CKEditor的CDN也是可以的。cdn地址：<script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>

（2）. 自从4.1版发布之后，插入高亮代码功能已经提供相应的功能。不用用户在自己去写扩展组件。只是需要用户下载codesnippet插件放到CKEditor的plugins目录即可。

　　Code Snippet的下载地址：http://ckeditor.com/addon/codesnippet

　　Code Snippet是CKEditor4.4.1的新插件，主要提供添加代码片段高亮显示的功能。另外注意一点的是，Code Snippet只是作为CKEditor的插件，真正实现代码高亮的是highlight.js这个代码高亮JS库。

　　Code Snippet只是将highlight.js作为默认的高亮库,由于highlight.js已经集成在Code Snippet中，所以我们在使用CKEditor时候是不需要另外再引用highlight.js这个库。（点击这里查看highlight.js的官方网站）。

　　以前的CKEditor版本由于没有比较好的代码高亮插件，都是自己自定义插件，当时用的是SyntaxHighlighter这个代码高亮库。大家也可网上搜下SyntaxHighlighter的资料。

然后设置下ckeditor的config.js配置文件,将插件添加进去即可,代码如下(这里只设置了一个插件属性，其他属性可根据需要设置)：

也可以设置高亮样式：config.codeSnippet_theme = 'zenburn'; 默认的是defualt;

这里有一点需要注意，如果按照上面添加插件的步骤而出现下面这两个错误：关于lineutils和widget 的，意思是找不到这两个插件。这时需要我们去官网下载这个插件加入即可：

lineutils 下载地址： http://ckeditor.com/addon/lineutils

widget 下载地址：http://ckeditor.com/addon/widget

下载页面如图所示：

这里提供两个方式可以加入此插件，1就是直接下载，2.点击Add to my editor按钮。在线添加插件。

此时高亮代码已经添加成功l.

第二部分上传图片

和以往的版本不同。4.4.5版本上传图片也增加了叫ckfinder的插件。

CKFinder 下载地址： http://cksource.com/ckfinder/download，注意：根据自己情况下载不同语言版本的。

稍后更新。没时间了。

巴特西

CKEditor4.4.5 插入高度代码及上传图片

最新文章

热门文章