ckeditor简单使用

在eclipse中新建maven项目ckeditor-demo,添加maven依赖pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.guiyi</groupId>
  <artifactId>ckeditor</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>ckeditor Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
    
    <dependency>
		<groupId>commons-io</groupId>
		<artifactId>commons-io</artifactId>
		<version>2.4</version>
	</dependency>
    <dependency>
		<groupId>commons-fileupload</groupId>
		<artifactId>commons-fileupload</artifactId>
		<version>1.3.1</version>
	</dependency>
    <!-- 加入jstl依赖包 -->
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>jstl</artifactId>
		<version>1.2</version>
	</dependency>
	<dependency>
		<groupId>javax.servlet.jsp</groupId>
		<artifactId>jsp-api</artifactId>
		<version>2.2.1-b03</version>
		<scope>provided</scope>
	</dependency>
	<!-- servlet -->
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>javax.servlet-api</artifactId>
		<version>3.1.0</version>
		<scope>provided</scope>
	</dependency>
	<dependency>
	     <groupId>com.ckeditor</groupId>
	     <artifactId>ckeditor-java-core</artifactId>
	     <version>3.5.3</version>
	</dependency>
    
  </dependencies>
  <build>
    <finalName>ckeditor</finalName>
  </build>
</project>

在webapp中复制ckeditor和ckfinder

在webapp中添加index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!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">
<title>Insert title here ${ctx}</title>

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

<script type="text/javascript">
	var editor = null;
	var root = '<%=request.getContextPath()%>';
	$(function() {
		//参数‘content’是textarea元素的name属性值,而非id属性值
		editor = CKEDITOR.replace('content', {
			customConfig:root+'/ckeditor/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
                    });
                }
            }
		}); 
		
		$('#form1 input[name=btn]').on('click',function() {
			console.info(editor.getData());
		});
	});
	
	function doSubmit() {
		editor.updateElement(); //非常重要的一句代码
        //前台验证工作
        //提交到后台
	}
</script>

</head>
<body>
	<form id="form1" name="form1" method="post" action="<%=request.getContextPath()%>/display.jsp">  
		<table width="650" height="400" border="0" align="center">  
			<tr>  
		        <td valign="top">主题:</td>  
		        <td>
		        	<input type="text" name="topic" />
		        </td>
		    </tr>
		    <tr>  
		        <td valign="top">内容:</td>  
		        <td>
		        <textarea cols="80" id="content" name="content">  
		        </textarea> 
		      	</td>  
		    </tr>  
		    <tr>  
		        <td></td>  
		        <td>
		        <input type="button" name="btn" value="测试"/> 
		        <input type="submit" name="submit" value="提交"/> 
		        <input type="reset" name="reset" value="重置" /></td>  
		    </tr>  
		</table>  
	</form>  
</body>
</html>

显示结果的jsp页面display.jsp如下

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	String topic = request.getParameter("topic");
	String content = request.getParameter("content");
	
	out.println(topic);
	
	out.println(content);
		
%>


你可能感兴趣的:(ckeditor)