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="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源码