在JSP里使用CKEditor和CKFinder

在JSP里使用CKEditor和CKFinder目录1. 下载CKEditor相关的安装文件2. 安装CKEditor和CKFinder3. 在网页里使用CKEditor4. CKEditor的三种配置方式5. CKEditor的一些配置选项6. 关于CKEditor编辑器里面回车的问题7. 将CKFinder整合进CKEditor8. 配置CKFinder9. 在项目里配置CKFinder的servlet10. 更安全的使用CKFinder1. 下载CKEditor相关的安装文件∙CKEditor: 在/download页面左侧，可以下载到各种版本的CKEditor，包括完整版full、标准版standard、基础版basic等。

在页面右侧上方，还有可定制的下载，可以选择Toolbar类型、插件、语言等。

这里我们选择4.1版本的Full版本，下载后得到CKEditor_4.1_full.zip 。

∙CKEditor for java: 在/download页面右侧下部，可以下载到用于服务器端的工具，记得选择for java版本。

这里选择 3.6.4版本。

但是下载下来却是 ckeditor-java-core-3.5.3.jar。

不知道为什么。

∙CKFinder: 在/ckfinder/trial页面，可以下载到各种版本的CKFinder。

仍然选择java版。

这里我们下载的是 2.3.1版本，下载后得到CKFinder_java_2.3.1.zip。

2. 安装CKEditor和CKFinder∙解压CKEditor_4.1_full.zip，把解压得到的目录 ckeditor 完全复制到网站根目录下，也就是和WEB-INF同级。

可以给这个目录加上版本号，即ckeditor4.1。

∙把ckeditor4.1/samples 完全删掉，把ckeditor4.1/lang 里面除了en.js和zh-cn.js之外的文件删掉，把ckeditor4.1 下的README.md, CHANGES.md删掉。

∙把ckeditor-java-core-3.5.3.jar 放到yourapp/WEB-INF/lib下∙解压CKFinder_java_2.3.1.zip，得到ckfinder目录。

将 ckfinder/CKFinderJava/ckfinder 目录完全复制到网站根目录下，也就是和WEB-INF同级。

可以给这个目录加上版本号，即ckfinder2.3.1。

∙把 ckfinder2.3.1/_samples完全删掉，把ckfinder2.3.1/lang 下除了en.js和zh-cn.js之外的文件删掉，把ckfinder2.3.1 下的changelog.txt，install.txt，license.txt，translations.txt删掉。

∙把 ckfinder/CKFinderJava/WEB-INF/lib 下所有的jar包复制到yourapp/WEB-INF/lib下。

∙把ckfinder/CKFinderJava/WEB-INF/config.xml复制到yourapp/WEB-INF下，并改名为ckfinder.xml。

3. 在网页里使用CKEditorStep1：找到需要放置CKEditor编辑器的页面，引入CKEditor的js文件（${contextPath}是JSTL写法，请改成你自己的路径写法，绝对路径或者相对路径）<script type="text/javascript"src="${contextPath}/ckeditor4.1/ckeditor.js"></script>Step2：在需要提交的form里，写一个<textarea><form id="detailForm" method="post"><textarea id="content" name="content"></textarea><input type="button" value="保存" id="save"onclick="save()"/></form> Step3：创建CKEditor实例<script type="text/javascript">var editor =null;window.onload =function(){editor = CKEDITOR.replace('content'); //参数‘content’是textarea元素的name属性值，而非id属性值}</script>注意上面代码中editor=CKEDITOR.repalce()必须写在window.onload事件里，或者写在textarea元素后面，以免出现content不存在的错误。

上述代码并不是创建CKEditor实例的唯一方法，大家可以自行查阅资料。

Step4：在页面js中为CKEditor编辑器设置/获取值editor.setData('这里是需要传递给CKEditor编辑器实例的值');editor.getData();注意，上面代码中用到了一个变量editor，就是Step3中定义的那个editor。

这也就是为什么Step3里面要单独写var editor = null这句代码。

当然，在<textarea></textarea>中直接设置值也可以，但是那只能在CKEDITOR.replace()之前起作用。

Step5：在后台java代码中获取CKEditor编辑器的值<script type="text/javascript">function save(){editor.updateElement(); //非常重要的一句代码//前台验证工作//提交到后台 }</script>因为CKEditor编辑器取代了原来我们写的textarea元素，所以我们在编辑器里写的内容，其实都不在textarea中，因此，为了能在后台通过textarea获得值，必须用editor.updateElement()来更新textarea元素。

这样，在后台java代码中就可以用request.getParameter('content');或者其他代码得到编辑器的内容了，否则得到的很可能不是编辑器里的内容。

4. CKEditor的三种配置方式方式一：修改ckeditor4.1/config.js文件CKEDITOR.editorConfig = function( config ) {nguage = 'zh-cn';config.uiColor = '#AADC6E';};方式二：复制ckeditor4.1/config.js，仍然放在ckeditor4.1目录下，但是改名为myconfig.js，并在这个文件中修改配置。

但是要在创建编辑器实例时指明配置文件路径：<script type="text/javascript">var editor = null;window.onload = function() {editor = CKEDITOR.replace( 'content', {customConfig:'${contextPath}/ckeditor4.1/myconfig.js'});};</script>方式三：在创建编辑器实例时指定配置<script type="text/javascript">var editor = null;window.onload = function() {editor = CKEDITOR.replace( 'content',uiColor: '#9AB8F3',language:'zh-cn'});};</script>使用第二种或者第三种方式的好处就在于，当你更新CKEditor版本时，不至于因为直接复制了新的config.js而覆盖掉个性配置。

5. CKEditor的一些配置选项完整的CKEditor的配置选项在这里。

下面是一些常用的配置。

∙language，defaultLanguage，contentLanguage, uiColor∙autoGrow_maxHeight, autoGrow_minHeight, resize_maxHeight, resize_minHeight, resize_maxWidth, resize_minWidth∙toolbarCanCollapse, toolbarGroups∙forcePasteAsPlainText, pasteFromWordKeepsStructure, pasteFromWordRemoveFontStyl es, pasteFromWordRemoveStyles∙font_names, fontSize_sizes6. 关于CKEditor编辑器里面回车的问题在CKEditor编辑器里面敲回车，默认是加一个<p></p>元素，而且在<p>之前和</p>之后会加换行。

这就造成一个问题，保存的数据最后可能会出现“\t\n”。

当我们使用editor.setData(......)时，实际上变成了editor.setData(......);因为数据本身带有一个\t\n，使得js代码换行了，从而页面出错。

可能还有其他方法解决这个问题，但是我采用的是禁止在回车变<p></p>时在后面添加换行。

其方法是：<script type="text/javascript">var editor = null;window.onload = function() {editor = CKEDITOR.replace( 'content', {customConfig:'${contextPath}/ckeditor4.1/myconfig.js',on: {instanceReady: function( ev ) {this.dataProcessor.writer.setRules( 'p', {indent: false,breakBeforeOpen: false, //<p>之前不加换行 breakAfterOpen: false, //<p>之后不加换行 breakBeforeClose: false, //</p>之前不加换行 breakAfterClose: false //</p>之后不加换行7 });}}});};</script>关于这部分内容，更多内容参看/#!/guide/dev_output_format7. 将CKFinder整合进CKEditor没有CKFinder，CKEditor作为一个编辑器，也是可以正常使用的，但是无法在编辑器里浏览服务器上的用户上传文件。