kindeditor

最新推荐文章于 2024-06-17 15:10:13 发布

liar771

最新推荐文章于 2024-06-17 15:10:13 发布

阅读量715

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/liar771/article/details/90157162

版权

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

快速部署
提交内容
显示上传内容
- 编写jsp，接收html字符串
- jsp标签向body写入接收到的html代码
完整代码

快速部署

安装

解压文件到项目
下载地址
网页导入js库

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>

网页添加编辑器

再body自定义位置添加标签<textarea>

<textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>

通过JavaScript代码，将<textarea>转化成编辑器

<script>
        KindEditor.ready(function(K) {
                var editor1 = K.create('#editor_id');
        });
</script>

查询编辑器内容

html = editor.html()；
html = document.getElementById('editor_id').value; 
html = K('#editor_id').val(); 
html = $('#editor_id').val();

提交内容

初始化

初始化时添加配置
- cssPath:指定编辑器的CSS文件，用于设置可视化区域的样式。
- uploadJson:指定上传文件的服务器端程序。
  样例:(/editor/jsp/upload_json.jsp)
- fileManagerJson:指定浏览远程图片的服务器端程序。
  样例:(/editor/jsp/file_manager_json.jsp)
- allowFileManager:true时显示浏览远程服务器按钮。

var config={
   			cssPath : '../editor/plugins/code/prettify.css',
   			uploadJson : './upload_json.jsp',
   			fileManagerJson : './file_manager_json.jsp',
   			allowFileManager : true
   		};
var editor1 = K.create(''#editor_id'',config);

上传数据

在editor上层简历form标签和input标签，以post方式提交数据。
上传内容是html，文件和图片会以对应的html标签插入其中
上传的文件会被设定的jsp页面处理

	<form name="example" method="post" action="receive">
		<textarea name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;">
		</textarea><br />
		<input type="submit" name="button" value="提交内容" />
	</form>

修改上传文件夹

(/editor/jsp/file_manager_json.jsp)和(/editor/jsp/upload_json.jsp)
这两个文件里有两行代码，表示保存目录，修改即可

//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "attached/";

//文件保存目录URL
String saveUrl  = request.getContextPath() + "/attached/";

显示上传内容

编写jsp，接收html字符串

三目运算符处理null的情况
request获取的参数名时<textarea>的name值，内容是上传的html数据

<%
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>

jsp标签向body写入接收到的html代码

jsp标签把内容输出到页面

<%=htmlData%>

完整代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>KindEditor JSP</title>
	<link rel="stylesheet" href="../editor/themes/default/default.css" />
	<link rel="stylesheet" href="../editor/plugins/code/prettify.css" />
	<script charset="utf-8" src="../editor/kindeditor-all.js"></script>
	<script charset="utf-8" src="../editor/lang/zh-CN.js"></script>
	<script charset="utf-8" src="../editor/plugins/code/prettify.js"></script>
	<script>
		KindEditor.ready(function(K) {
			var editor1 = K.create('textarea[name="content1"]', {
				cssPath : '../editor/plugins/code/prettify.css',
				uploadJson : './upload_json.jsp',
				fileManagerJson : './file_manager_json.jsp',
				allowFileManager : true
			});
		});
	</script>
</head>
<body>
	<%=htmlData%>
	<form name="example" method="post" action="demo.jsp">
		<textarea name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlData%></textarea>
		<br />
		<input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)
	</form>
</body>
</html>

liar771

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
kindeditor

这里写自定义目录标题快速部署安装网页添加编辑器查询编辑器内容提交内容初始化上传数据修改上传文件夹显示上传内容编写jsp，接收html字符串jsp标签向body写入接收到的html代码完整代码快速部署安装解压文件到项目下载地址网页导入js库<script charset="utf-8" src="/editor/kindeditor.js"></script>...
复制链接

扫一扫

专栏目录