ckeditor使用记录

项目中遇到一个需求，需要提供给客户在页面编辑对象属性的功能。为此，找到了ckeditor.

1.jsp+serlevt上传图片

如果想要添加图片的话，就需要在配置中进行设置，放开图片上传UI。

首先在plugins/image/dialogs/image.js中找到id:'Upload',将其后面的hidden状态修改成false.这样就可以在页面上看到图片上传部分。

然后在ckeditor的根目录下面的config.js中增加config.filebrowserUploadUrl="actions/fileUpload",这个配置是用来进行图片上传保存的。我配置了一个servlet来处理。

这里需要注意的是，在文件上传的最后，需要调用ckeditor的函数进行图片格式设置，从而达到用户上传图片就可以预览编辑图片。代码如下：

    PrintWriter out = response.getWriter();  
                    out.println("<script type=\"text/javascript\">");  
                    out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + request.getContextPath() + "/upload/" + filename + "','')");  
                    out.println("</script>"); 

2.给ckeditor添加居中工具

需要从官网去下载justify插件，解压后，放到plugins根目录下，然后在ckeditor.js文件中的CKEDITOR.config.plugins='justify,dialogui,“里增加”justify“。这样就可以看到工具栏上出现居中、居左等按钮了。

3.在将用户编辑的内容提交到数据库的时候，我开始使用的editor.getData()方法进行源码获取，然后在展示页面通过jquery的append方法将内容附加上去。但是这个样子遇到了一个换行的问题。然后使用editor.document.getBody().getHtml();获取html标签的方式进行数据保存，在展示就没有问题了。