1、本人使用的CKEditor版本是4.2 在官网上下载个CKeditor http://ckeditor.com/download，如果您只是简单的使用，可以下载一个简洁版
，如果是想功能完善一点，可以下载full版！
这里我下载的是Full Package！ 下载之后解压，直接添加到项目中的WebRoot下任意路径下！
2、页面引用：
①引入js：
- <script language="javascript" src="<%=request.getContextPath()%>/common/ckeditor/ckeditor.js" type="text/javascript"></script>
我这里把ckeditor放在了WebRoot下的common目录下
②通过一个textarea 替换成编辑器：
- <html:hidden property="oper" />
- <textarea rows="30" cols="50" name="content"></textarea>
这里隐藏了一个对象字段，对应到数据库保存字段！主要用 于 回显
③js 创建ckeditor对应，引入编辑器：
- <script type="text/javascript">
- var editor = null;
- window.onload=function(){
- editor = CKEDITOR.replace('content');
- editor.setData(document.getElementsByName("oper")[0].value);
- }
-
- </script>
至此就可以用了
3、上传图片
点击编辑器中图标可以看到插入图片的窗口！可能我只是个新手，但是我还是感觉这块太不好用了只是有个【图片信息】、【链接】、【高级】；想插入图片非常麻烦，这里可以把 隐藏的【上传】功能按钮显示出来，但是具体的上传功能还是要咱们手写；
①把【上传】按钮显示出来：
首先，还是image.js这个文件，搜索“upload”可以找到这一段
id:'Upload',hidden:！0
实际上上传功能被隐藏了，把上面的！0改成false，或者是0，再打开编辑器，就能找到上传功能了。
②完成上传类：
- <pre code_snippet_id="150343" snippet_file_name="blog_20140110_1_5783331" name="code" class="java">public class UploadAction extends Action{
-
-
- private FormFile upload;
-
- public FormFile getUpload() {
- return upload;
- }
-
- public void setUpload(FormFile upload) {
- this.upload = upload;
- }
-
- public ActionForward execute(ActionMapping mapping,ActionForm form,
- HttpServletRequest request,HttpServletResponse response) throws Exception{
- PrintWriter out = response.getWriter();
- DiskFileUpload upload = new DiskFileUpload();
- upload.setHeaderEncoding("UTF-8");
- List list = upload.parseRequest(request);
- response.setCharacterEncoding("UTF-8");
- String realPath = request.getSession().getServletContext().getRealPath("/");
-
- Iterator iter= list.iterator();
- while(iter.hasNext())
- {
- String callback = request.getParameter("CKEditorFuncNum");
- FileItem element = (FileItem) iter.next();
- String fileName = element.getName();
- String fileType = fileName.split("\\.")[1];
- String fileNamed = java.util.UUID.randomUUID().toString();
- fileNamed = fileNamed+"."+fileType;
- if(!fileType.equals("png")&&!fileType.equals("gif")&&!fileType.equals("jpg")&&!fileType.equals("jpeg")&&!fileType.equals("bmp")){
- out.println("<script type=\"text/javascript\">");
- out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");
- out.println("</script>");
- return null;
- }
- File file = new File(realPath+"UserFiles/",fileNamed);
- element.write(file);
- out.println("<script type=\"text/javascript\">");
- out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "UserFiles/"+fileNamed+"','')");
- out.println("</script>");
- }
- return null;}
-
-
- }</pre><br>
- <br>
- <pre></pre>
- <pre></pre>
- <pre></pre>
- <pre></pre>
我这里是用的struts1 写的一个action 这里 自己随意写个上传类servlet action 都无所谓！只要ckeditor能找到就行
③ ckeditor 调用上传类：在config.js 中添加
- var pathName = window.document.location.pathname;
-
- var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
- config.filebrowserImageUploadUrl = projectName+'/uploadAction.do';
- config.filebrowserUploadUrl=projectName+"/uploadAction.do";
这里pathName指的是项目名！
④ 在ckeditor 字体中加 中文字体 ：这是默认没有中文字体； 同样可以在config.js中添加：
- config.font_names='宋体/宋体 ;黑体/黑体 ;仿宋/仿宋_GB2312 ;楷体/楷体_GB2312 ;隶书/隶书 ;幼圆/幼圆 ;微软雅黑/微软雅黑 ;'+ config.font_names;
-
这样就能显示中文字体了
4、添加行距：
①从百度上下载一个 ckeditor 行距包，解压放到ckeditor/plugins目录下。
②在config.js 中添加
config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');//行距③（转载）
1. lineheight插件源码修改：
1.原先的插件依赖于ckeditor/plugins/sytles插件，而ckeditor4.0是没有这个插件，所以如果直接使用该插件，会报错：
Uncaught [CKEDITOR.resourceManager.load] Resource name "styles" was not found
因此，要修改插件中对styles的引用:
a.在lineheight目录下的plugin.js中：
将
- CKEDITOR.plugins.add('lineheight',
- {
- %
