kindeditor来做富文本。
springmvc+kindeditor
以前也用过,但是没有很清楚的了解kindeditor的适用方法,今天花了大量时间弄它。
首先,kindeditor能够帮助我们实现富文本的操作。
他怎么实现的呢?
看下例子就可以知道,比方说example中的simple.html:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Simple Examples</title> <style> form { margin: 0; } textarea { display: block; } </style> <link rel="stylesheet" href="../themes/default/default.css" /> <script charset="utf-8" src="../kindeditor-min.js"></script> <script charset="utf-8" src="../lang/zh_CN.js"></script> <script> var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="content"]', { resizeType : 1, allowPreviewEmoticons : false, allowImageUpload : false, items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link'] }); }); </script> </head> <body> <h3>默认模式</h3> <form> <textarea name="content" style="width:700px;height:200px;visibility:hidden;">KindEditor</textarea> </form> </body> </html>
<link rel="stylesheet" href="../themes/default/default.css" /> <script charset="utf-8" src="../kindeditor-min.js"></script> <script charset="utf-8" src="../lang/zh_CN.js"></script>
然后再确定哪个textarea需要设置为富文本:
<textarea id="content" name="content" style="width:700px;height:300px;"></textarea>
<script> var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="content"]', { resizeType : 1, allowPreviewEmoticons : false, allowImageUpload : false, items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link'] }); }); </script>
就是这么个流程,这只是最基础的。而如果复杂一点,要将图片上传到某个地方,并且自动插入到textarea标签中,怎么做呢?
在前面我做过一个图片、视频上传的一个功能:图片上传。这里就需要用到它。
先来处理上传位置的问题:
upload_json.jsp中:
//文件保存目录路径 String savePath = pageContext.getServletContext().getRealPath("/") + "attached/"; //文件保存目录URL String saveUrl = request.getContextPath() + "/attached/";
接下来解决插入图片:
在没有改变的时候,会报错,通过火狐可以看具体路径。
仔细看upload_json.jsp,会发现有个url,obj.put("url", saveUrl+newFileName);
JSONObject设置了url,就会运行该url对应的方法。我是这样设置的:
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; String picturePath = basePath+"/comment/getImage?path="+saveUrl + newFileName; obj.put("url", picturePath);
@RequestMapping(value = "/getImage",params = {"path"},method = RequestMethod.GET) public void getImage(HttpServletResponse response,String path) throws IOException { File file = new File(path); commentService.getImage(file, response); }
@Override public void getImage(File file,HttpServletResponse response) throws IOException { FileInputStream inputStream = new FileInputStream(file); byte[] data = new byte[(int)file.length()]; inputStream.read(data); inputStream.close(); String[] f = file.getPath().split("\\."); String contentType = f[f.length-1].toLowerCase(); //contentType = MIMEPropertiesReader.getProperty(contentType); response.setContentType(contentType); OutputStream stream = response.getOutputStream(); stream.write(data); stream.flush(); stream.close(); }
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
path IS: /jspSmartUpLoad
basePath IS: http://yangm1203.oicp.net:8080/jspSmartUpLoad/
request.getScheme() IS: http
request.getServerName() IS: yangm1203.oicp.net
request.getServerPort() IS: 8080