Ckeditor 的使用

于 2013-01-09 18:00:21 发布
阅读量4.3k 收藏 2
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liuc0317/article/details/8486745
版权

在做网页编辑时，我们选用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="提交" οnclick="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;


	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doPost(req, resp);
	}

 
	@Override
	protected 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");//title
		title = 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.youkuaiyun.com/guoquanyou/article/details/6818750

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

Demo 下载地址：http://download.youkuaiyun.com/detail/liuc0317/4980654

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值