Java web--CKEditor编辑器的使用

  CKEditor是新一代的FCKditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。

目录

一、CKEditor的下载

二、CKEditor的创建

三、CKEditor的配置

四、CKEditor调用实例


一、CKEditor的下载

  在CKEditor的官网http://www.ckeditor.com下载CKEditor压缩包,解压之后就可以使用。

  我在博客中上传了CKEditor4的资源,如果你不想费事的话可以下载  https://download.csdn.net/download/qq_43238335/12466599

二、CKEditor的创建

  将CKEditor工具嵌入网页有很多方法,在此使用的是通过js和jsp完成的。

  1.将解压后的ckeditor目录复制到Web工程的WebRoot(myeclipse)或WebContent(eclipse)下。

  2.在WebRoot或WebContent下,创建调用页面。

   ①.导入ckeditor.js文件,<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>

   ②.创建textarea元素,将其class属性设置为ckeditor

3.创建一个显示页面,获取textarea中的信息

三、CKEditor的配置

  CKEditor编辑器可以自由配置,如编辑器的语言、工具集、背景颜色等,CKEditor的配置都集中在ckeditor/config.js文件中。具体的配置属性在官网都可以查阅,没有特殊要求的话是无需配置的。

四、CKEditor调用实例

  通过两个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>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑公告</title>
</head>
<body>
	<center>
		<form method="post" action="a04a_2.jsp">
			编辑公告内容
			<textarea class="ckeditor" rows="40" cols="80" name="board"></textarea>
			<input type="submit" value="显示公告内容" />
		</form>
	</center>
</body>
</html>


<%@ 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">
<title>公告显示</title>
</head>
<body>
<%request.setCharacterEncoding("UTF-8"); %>
${param.board}
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_43238335/article/details/106387003