mtjmtj7的小站
mtjmtj7的小站
© mtjmtj7
All Rights Reserved.

富文本编辑器kindeditor的使用(Java版)

KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

首先下载工具包kindeditor-4.1.11-zh-CN

解压后删除asp,asp.net,php文件夹。

在Eclipse新建web项目

把文件拷贝至web-content下

将/jsp/lib目录下的3个jar文件复制到web-inf的lib目录下
* commons-fileupload-1.2.1.jar
* commons-io-1.4.jar
* json_simple-1.1.jar

新建idnex.html

如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OnlineEditer</title>
</head>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script charset="utf-8" src="kindeditor.js"></script>  
<script charset="utf-8" src="lang/zh_CN.js"></script>  
<script>  
      KindEditor.ready(function(K) {  
             window.editor = K.create('#editor_id');  
      });  
</script>  
<body>
<div class="container">
<form method="post" action="AddDocument">
	<textarea id="editor_id" name="content"></textarea>  
	<br>	
	<input type="submit" class="btn btn-default pull-left"  name="button" value="提交内容" />
</form>
</div>
</body>
</html>
<script>
	
</script>

同时,修改kindeditor.js里面的文件名,因为原来是php的,要更改成jsp的。

为了方便显示结果,我们用servlet显示结果

                request.setCharacterEncoding("UTF-8");
		String htmlData = request.getParameter("content");
		System.out.println(htmlData);

 

打赏
2017-08-30
64,520 阅读

发表评论