快速部署
安装
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
网页添加编辑器
<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代码
<%=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>