Ckeditor 的使用

在做网页编辑时，我们选用Ckeditor 。来编辑。

有点麻烦，在这里做一个笔记，用的时候，把代码拷下来就直接用，其中处理了，上传图片，视频，还有中文乱码等问题。

首先下载ckeditor 和 ckfinder 的 rar 包，解压放到WebRoot 下，

项目，结构图如下：

然后，在index.jsp 页面中 导入 这两个文件。

<script type="text/javascript" src="ckeditor/ckeditor.js"></script><script type="text/javascript" src="ckfinder/ckfinder.js"></script><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

新建一个config.xml 放到WEB-INF 下内容如下：

<config><enabled>true</enabled><baseDir></baseDir><baseURL>/CkeditorForJava/userfiles/</baseURL><licenseKey></licenseKey><licenseName></licenseName><imgWidth>1600</imgWidth><imgHeight>1200</imgHeight><imgQuality>80</imgQuality><uriEncoding>UTF-8</uriEncoding><forceASCII>false</forceASCII>        <disallowUnsafeCharacters>false</disallowUnsafeCharacters><userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar><checkDoubleExtension>true</checkDoubleExtension><checkSizeAfterScaling>true</checkSizeAfterScaling><secureImageUploads>true</secureImageUploads><htmlExtensions>html,htm,xml,js</htmlExtensions><hideFolders><folder>.svn</folder><folder>CVS</folder></hideFolders><hideFiles><file>.*</file></hideFiles><defaultResourceTypes></defaultResourceTypes><types><type name="Files"><url>%BASE_URL%files/</url><directory>%BASE_DIR%files</directory><maxSize>0</maxSize><allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip</allowedExtensions><deniedExtensions></deniedExtensions></type><type name="Images"><url>%BASE_URL%images/</url><directory>%BASE_DIR%images</directory><maxSize>0</maxSize><allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions><deniedExtensions></deniedExtensions></type><type name="Flash"><url>%BASE_URL%flash/</url><directory>%BASE_DIR%flash</directory><maxSize>0</maxSize><allowedExtensions>swf,flv</allowedExtensions><deniedExtensions></deniedExtensions></type></types><accessControls><accessControl><role>*</role><resourceType>*</resourceType><folder>/</folder><folderView>true</folderView><folderCreate>true</folderCreate><folderRename>true</folderRename><folderDelete>true</folderDelete><fileView>true</fileView><fileUpload>true</fileUpload><fileRename>true</fileRename><fileDelete>true</fileDelete></accessControl></accessControls><thumbs><enabled>true</enabled><url>%BASE_URL%_thumbs/</url><directory>%BASE_DIR%_thumbs</directory><directAccess>false</directAccess><maxHeight>100</maxHeight><maxWidth>100</maxWidth><quality>80</quality></thumbs><plugins><plugin><name>imageresize</name><class>com.ckfinder.connector.plugins.ImageResize</class><params><param name="smallThumb" value="90x90"></param><param name="mediumThumb" value="120x120"></param><param name="largeThumb" value="180x180"></param></params></plugin><plugin><name>fileeditor</name><class>com.ckfinder.connector.plugins.FileEditor</class><params></params></plugin></plugins><basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl></config>

修改web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app id="WebApp_ID" version="2.4"xmlns="http://java.sun.com/xml/ns/j2ee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  <!-- ckeditor 配置 开发始 --><servlet><servlet-name>ConnectorServlet</servlet-name><servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class><init-param><param-name>XMLConfig</param-name><param-value>/WEB-INF/config.xml</param-value></init-param><init-param><param-name>debug</param-name><param-value>false</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>ConnectorServlet</servlet-name><url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern></servlet-mapping><filter><filter-name>FileUploadFilter</filter-name><filter-class>com.ckfinder.connector.FileUploadFilter</filter-class><init-param><param-name>sessionCookieName</param-name><param-value>JSESSIONID</param-value></init-param><init-param><param-name>sessionParameterName</param-name><param-value>jsessionid</param-value></init-param></filter><filter-mapping><filter-name>FileUploadFilter</filter-name><url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern></filter-mapping><session-config><session-timeout>10</session-timeout></session-config>  <!-- ckeditor 配置 开结束 --> <!-- ckeditor 后台数据获取 配置 开始 --><servlet> <servlet-name>myPicture</servlet-name> <servlet-class>com.etor.text.MyPicture</servlet-class></servlet><servlet-mapping> <servlet-name>myPicture</servlet-name> <url-pattern>*.do</url-pattern></servlet-mapping>     <!-- ckeditor 后台数据获取 配置 结束 -->     <!-- URLrewrite 配置 开始 --><filter><filter-name>UrlRewriteFilter</filter-name><filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class></filter><filter-mapping><filter-name>UrlRewriteFilter</filter-name><url-pattern>/*</url-pattern><dispatcher>REQUEST</dispatcher><dispatcher>FORWARD</dispatcher></filter-mapping>  <!-- URLrewrite 配置 结束 --><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list></web-app>

然后，看一下index.jsp 页面的内容

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="ckeditor/ckeditor.js"></script><script type="text/javascript" src="ckfinder/ckfinder.js"></script><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><title>CkeditorAndckfinderForJava</title><script type="text/javascript">function sub(){var editor1 = CKEDITOR.instances.editor1.getData();//取得textarea的值alert("q" + editor1 + "q");var title= $("#title").val();alert(title);        document.myform.action="myPicture.do?editor1="+editor1+"&title"+title;    document.myform.submit();}        $(function () {            //处理CKEDITOR的值 处理获取图片的地址            function CKupdate() {                 for (instance in CKEDITOR.instances)                     CKEDITOR.instances[instance].updateElement();            }                    })    </script></head><body><form name="form" id="myform"  method="post" > <table>   <tr>    <td>标题：</td>    <td><input type="text" id="title" name="title"></td>   </tr>   <tr>     <td colspan="2">    <textarea id="editor1" name="editor1" class="ckeditor" rows="10" cols="80"> </textarea>    </td>   </tr> </table><input type="button" id="subAjax" value="提交" onclick="sub();" /></form></body></html>

注：需要定义 成UTF-8 的页面。

看一下后台获取数据的代码 MyPicture.java。

package com.etor.text;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class MyPicture extends HttpServlet { // <!--   <%=request.getParameter("content")%> --> private static final long serialVersionUID = -5086295779218715999L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {this.doPost(req, resp);} @Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {  String content = req.getParameter("editor1");content = new String(content.getBytes("ISO-8859-1"),"UTF-8");String title = req.getParameter("title");//titletitle = new String(title.getBytes("ISO-8859-1"),"UTF-8");System.out.println("title:"+title);System.out.println(content);req.setAttribute("contentMy",content);   req.getRequestDispatcher("/result.jsp").forward(req, resp);}}

看一下效果图：

最后，到后台 到跳转到result.jsp

有时候，我们需要自己配置一下，ckeditor 的工具栏，配置在 ckeditor/config.xml ，可以修改，需要哪些工具栏。

有时候，我们上传图片，视频，文件，不需要 让他浏览服务器上的其他文件内容，这个时候，我们需要把浏览服务器 的功能 去掉，

请参看 http://blog.163.com/zjc_8886/blog/static/2408175201011222590967/ 

我测试过，好使。

有时候，文件名是中文件的会上传时，打不开图片或是图片出现一个X ，不支持中文图片名，需要设置一下服务器参见。

http://blog.csdn.net/guoquanyou/article/details/6818750

我测试过，不太好使。在后台中文图片 名 获取不到，会出现 ??11.jpg 这样的格式。

Demo 下载地址：http://download.csdn.net/detail/liuc0317/4980654