kindeditor富文本编辑器的使用
1：官网下载http://kindeditor.net/demo.php
2：把下载的文件放入到项目中的静态资源目录下 比如static目录下
kindeditor 目录结构
3：把demo.jsp页面跟富文本有关系的代码复制到自己的div上
.jsp 页面 代码
注意 （1） 修改css script 的路径问题，
（2） 修改css script 的路径问题，
<%@ include file="/webpage/include/taglib.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>商品管理</title>
<meta name="decorator" content="default" />
<link rel="stylesheet" href="${ctxStatic}/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="${ctxStatic}/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="${ctxStatic}/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="${ctxStatic}/kindeditor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="richText"]', {
cssPath : '${ctxStatic}/kindeditor/plugins/code/prettify.css',
uploadJson : '${ctx}/uploadEditorImage',
/* fileManagerJson : '/static/kindeditor/kindeditor/jsp/file_manager_json.jsp',*/
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
},
afterBlur: function () { this.sync(); }//这一步非常重要，如果遗漏，则后台无法接收到数据。
});
prettyPrint();
});
function doSubmit() {//提交表单
if (validateForm.form()) {
$("#inputForm").submit();
return true;
}
return false;
}
$(document).ready(function () {
//这里是编辑的时候回显富文本内容，富文本回显
$("#richText").html($("#itemDetail").val()
});
</script>
</head>
<body class="hideScroll">
<div>
<form:form id="inputForm" modelAttribute="shopItemDetail" name="example"
action="${ctx}/shopitemdetail/shopitemdetail/editorSubimt" method="post" class="form-horizontal">
<textarea id="richText" name="richText" cols="100" rows="8" style="width:100%;height:500px;visibility:hidden;"></textarea>
<form:input path="goodsid" htmlEscape="false" class="form-control required" style="display: none" ></form:input>
<form:input path="id" htmlEscape="false" class="form-control required" style="display: none" ></form:input>
<form:textarea path="itemDetail" htmlEscape="false" class="form-control required" style="display: none" ></form:textarea>
</form:form>
</div>
</body>
<%!
private String htmlspecialchars(String str) {
/*str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll("\"", """);*/
return str;
}
%>
</html>
4：上传图片代码
@RequestMapping(value = {"uploadEditorImage", "uploadEditorFile"})
public void uploadEditor( HttpServletRequest request, HttpServletResponse response, MultipartFile imgFile) throws IllegalStateException, IOException {
String filepath = "";
LayFileJsonData data = new LayFileJsonData();
// 判断文件是否为空
if (imgFile!=null) {
// 文件保存路径
String realPath = Global.USERFILES_BASE_URL
+ UserUtils.getPrincipal() + "/images/" ;
// 转存文件
FileUtils.createDirectory(Global.getUserfilesBaseDir()+realPath);
imgFile.transferTo(new File( Global.getUserfilesBaseDir() +realPath + imgFile.getOriginalFilename()));
filepath = request.getContextPath()+realPath + imgFile.getOriginalFilename();
data.setName(imgFile.getName());
data.setSrc(filepath);
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
PrintWriter out = response.getWriter();
System.out.println("requestRootUrl========"+requestRootUrl);
System.out.println("filepath========"+filepath);
obj.put("url", requestRootUrl+filepath ); //url 绝对路径
out.print(obj.toString());
out.close();
}
5 ： 后台保存form 表单数据 注意，获取到的富文本参数 里面的标签被转换成< 等，所以保存到数据库前，反转一下
private String htmlspecialchars(String str) {
str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll(""", "\"");
return str;
}
6：到上面一步就结束了，由于我们项目是用于app端显示，上传的图片过大，显示超出有滚动条，解决方法
修改 js源码
