富文本框的使用kindeditor

最新推荐文章于 2023-07-05 07:45:48 发布

zihandan

最新推荐文章于 2023-07-05 07:45:48 发布

阅读量504

点赞数

分类专栏： Java 文章标签：富文本

本文链接：https://blog.csdn.net/zihandan/article/details/49997031

版权

Java 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

有时项目中需要引入富文本框（这里我简单的写一下使用步骤）

一、1、在工程wapapp下面建一个文件plugins（名字自己定为了放 kindeditor-4.1.10文件）将kindeditor-4.1.10放入该文件下

下载地址：http://download.pchome.net/design/homepage/download-170038.html

2、建一个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">
<title>Insert title here</title>
<link rel="stylesheet" href="plugins/kindeditor-4.1.10/themes/default/default.css">
<link rel="stylesheet" href="plugins/kindeditor-4.1.10/plugins/code/prettify.css">
<script charset="utf-8"  type="text/javascript" src="plugins/kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8"  type="text/javascript" src="plugins/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script charset="utf-8"  type="text/javascript" src="plugins/kindeditor-4.1.10/plugins/code/prettify.js"></script>
<script type="text/javascript">
	KindEditor.ready(function(K){
		var editor1= K.create('textarea[id="context"]',{
				cssPath : 'plugins/kindeditor-4.1.10/plugins/code/prettify.css',
				uploadJson : 'plugins/kindeditor-4.1.10/jsp/upload_json.jsp',
				fileManagerJson : 'plugins/kindeditor-4.1.10/jsp/file_manager_json.jsp',
				allowFileManager : true,
				afterCreate : function() {
				}				
		});	
		prettyPrint();
	})
</script>
</head>
<body>
	<form action="#" method="post">
		<textarea rows="20" cols="50" id="context">这是富文本框</textarea>
	</form>
</body>
</html>

其中文本框的宽、高都能设置，具体可以看下载下来的 kindeditor-4.1.10 的文档说明

3、其中jsp文件下面的：jsp/file_manager_json.jsp

//根目录路径，可以指定绝对路径，比如 /var/www/attached/
String rootPath = pageContext.getServletContext().getRealPath("/") + "attached/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl  = request.getContextPath() + "/attached/";

其中attached 必须存在（可以在webapp底下新建一个attached ）

4、在地址栏输入就行

http://localhost:8080/test5/kindeditorTest1.jsp

zihandan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
富文本框的使用kindeditor

有时项目中需要引入富文本框（这里我简单的写一下使用步骤）一、1、在工程wapapp下面建一个文件plugins（名字自己定为了放 kindeditor-4.1.10文件）将kindeditor-4.1.10放入该文件下下载地址：http://download.pchome.net/design/homepage/download-170038.html2、建一个jsp页面，代码如下：
复制链接

扫一扫