文档章节

ckeditor简单使用

chaun
 chaun
发布于 2015/04/30 14:16
字数 495
阅读 488
收藏 0

在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);
		
%>


© 著作权归作者所有

chaun
粉丝 92
博文 269
码字总数 91059
作品 0
深圳
高级程序员
私信 提问
CKEditor 又拍云上传插件新鲜出炉!

What is CKEditor? CKEditor 是一个基于网页的开源 WYSIWYG 编辑器。CKEditor 因为十分轻便,很容易在不同的环境中嵌入。 How to install origin CKEditor? Ckeditor 的安装十分简单,下载链...

又拍云
2016/12/30
2
0
CKEditor3.x 在Java项目中配置、包括图片上传(支持FTP、图片压缩)

CKEditor 3.x配置说明 一、基本使用: 1、所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip 下载地址:http://ckeditor.com/download 2、配置使用 A.将下载下来的CKEditor压缩...

一枚Sir
2014/05/29
2.4K
0
我的网站搭建 (第六天) Ckeditor编辑器

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,这是百度百科的对富文本编辑器的解释。我们可以借助富文本编辑器,编辑出来一个包含html的页面,...

代码打碟手
2018/08/27
261
0
CKeditor 在网页中的整合

1.在http://ckeditor.com/download上下载最新版本的CKeditor。将下载的文件解压,然后将4M多的文件减肥:可以删掉samples、source、tests这三个无用的文件夹;打开lang文件夹,删掉除languag...

frylan
2012/04/23
280
0
在django的admin使用ckeditor模块

首先在这个网站下载最新的django-ckeditor安装包: https://github.com/jeffh/django-ckeditor 然后解压缩,使用:python setup.py install安装,如果不是root用户,需要sudo 一。在你的解压缩...

岭南六少
2011/08/06
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
6
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部