下载地址：http://ckeditor.com/download
如上图所示，一共有四种版本。笔者直接下载的是Full Package的版本，然后根据自己的需要增加其他插件（本以为Full版本包含了所有的plugins，但是也没有包含codesnippet的插件）。插件下载地址：http://ckeditor.com/addons/plugins/all 。下载插件后（如codesnippet），将colorbutton整个文件夹放入ckeditor Full Package的plugins下面，如下所示：
如上所述之外，还需要引入codesnippet的依赖插件clipboard、lineutils、widget、dialog。 2、将上述ckeditor的依赖导入项目后，按如下操作创建编辑页面。 在body中添加textarea标签
<textarea id="TextArea1" class="ckeditor"></textarea> 页面中添加js文件 var config = { extraPlugins: 'codesnippet', codeSnippet_theme: 'zenburn', height: 356 }; var editor = CKEDITOR.replace('TextArea1', config); $(function(){ // 提交按钮 $('#submit').click(function(){ // 获取富文本的html值 var content = editor.document.getBody().getHtml(); var data = {}; data.content = content; $.post("/article/save", data, function(result){ var data = eval("(" + result + ")"); alert(data.msg); }); }); }); 到此为止，ckeditor的编辑页面已经出来了。 3、富文本读取展示 入不包含codesnippet插件的引入，此富文本的展示并没有什么坑，直接展示即可。当需要展示code部分的东西时，就出问题了。如下图：此时的展示还与codesnippet的依赖有关，还需引入highlight的插件（下载地址：https://highlightjs.org）。而后引入以下文件
<link rel="stylesheet" href="/js/highlight/styles/dark.css"> <script src="/js/highlight/highlight.pack.js"></script> 和以下js执行代码 <script> hljs.initHighlightingOnLoad(); </script> 到此为止，笔者以为可以完成了。但是还是出现上图的样式，仔细研究了一下发现。codesnippet在展示的时候会有一些问题，然后有调整了一下响应的css文件如下： <style type="text/css"> .cke_widget_drag_handler_container{display: none !important;background-repeat: no-repeat !important;position: absolute;width: 15px;height: 15px;} .cke_widget_wrapper{position: relative;} </style> 到这为止才完成了所有的展示工作。如下所示：4、ckeditor富文本编辑器增加文件上传功能 当点击富文本编辑框上面的图片按钮时，此时会出现文件上传的弹出框。此时如需要上传图片，后台需要提供上传图片的接口。 首先更改/ckeditor/config.js 增加上传路径
CKEDITOR.editorConfig = function( config ) { config.filebrowserUploadUrl="/upload/file"; }; ckeditor上传的参数如下：upload（图片文件/POST），另外还会以GET方式带三个参数到后台：CKEditor=TextArea1&CKEditorFuncNum=1&langCode=zh-cn。在此笔者只用到了一个参数CKEditorFuncNum，用以构造返回参数。返回参数需固定格式如下（响应头中contentType='text/html'）： <script type="text/javascript"> // 第一个参数为：ckeditor传到后台的CKEditorFuncNum // 第二个参数为图片的URL地址 window.parent.CKEDITOR.tools.callFunction(1,'/images/5C1C0091-C756-4EC5-9269-2746A85EF809 .png','') </script> 如此图片便可以上传，而且可以预览出来。加入下面返回的script代码中是为了预览上传的图片。链接：http://moguhu.com/article/detail?articleId=15
