場景

KindEitor官方文檔：

http://kindeditor.net/demo.php

實現

效果

下載Kindeditor

下載地址：

http://kindeditor.net/down.php

點擊最新版本或小面自己選擇版本就可下載

下載之后解壓

其中前面是各種語言的示例demo,主要部分是下面的lang、plugins、themes、kindeditor-all.js、kindeditor-all-min.js、license.txt

添加到項目

這里使用的是4.1.10版本

將解壓后的核心文件夾復制到項目下webapp下的某目錄下

?

修改jsp頁面

打開jsp頁面

首先引入kindeditor.js

<script type="text/javascript"src="${ctx}/resources/BJUI/plugins/kindeditor_4.1.10/kindeditor.js"></script> <script type="text/javascript">

然后在頁面需要添加富文本編輯器的地方添加textarea元素

<textarea name="content" id="content" class="j-content" rows="4"cols="58" data-toggle="kindeditor" data-minheight="500"style="width: 100%">${message.content}</textarea>

然后在頁面上再添加腳本

<script type="text/javascript">var editor = null;KindEditor.create('textarea[name="content"]',{uploadJson : '${ctx}/bus/pushMessageAction/doSaveImage',fillDescAfterUploadImage : false, //上傳圖片成功后轉到屬性頁，為false則直接插入圖片[設為true方便自定義函數(X_afterSelect)]items : [ 'source', '|', 'undo', 'redo', '|', 'preview','print', 'template', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft','justifycenter', 'justifyright', 'justifyfull','insertorderedlist', 'insertunorderedlist', 'indent','outdent', 'subscript', 'superscript', 'clearhtml','quickformat', 'selectall', '|', 'fullscreen', '/','formatblock', 'fontname', 'fontsize', '|','forecolor', 'hilitecolor', 'bold', 'italic','underline', 'strikethrough', 'lineheight','removeformat', '|', 'table', 'hr', 'image' ],height : "400px",width :"80%",allowImageUpload : true,autoHeightMode : true,formatUploadUrl:false,afterCreate : function() {this.loadPlugin('autoheight');},afterBlur : function() {this.sync();}//Kindeditor下獲取文本框信息 }) </script>

具體參數說明參照官方文檔：

http://kindeditor.net/docs/option.html

編寫后臺接口

來到uploadJson 所對應的后臺接口

@Description("圖片保存")@ResponseBody@RequestMapping(value = "/doSaveImage")public void doSaveImage(HttpServletRequest request, HttpServletResponse response, MultipartFile imgFile,String dir) {String scheme = request.getScheme();//httpString serverName = request.getServerName();//localhostint serverPort = request.getServerPort();//8080String contextPath = request.getContextPath();//項目名String url = scheme+"://"+serverName+":"+serverPort+contextPath+"/upload/messageImg";Map<String, Object> jsonResult = null;String msg = "";try {response.setCharacterEncoding("UTF-8");PrintWriter out = null;try {out = response.getWriter();} catch (IOException e1) {e1.printStackTrace();}String callback = request.getParameter("CKEditorFuncNum");// 獲得response,requestMap<String, Object> m = new HashMap<String, Object>();if (!ServletFileUpload.isMultipartContent(request)) {m.put("error", 1);m.put("message", "請選擇文件!");out.print(getError("請選擇文件。"));out.close();return;}String originalFileName = null;// 上傳的圖片文件名String fileExtensionName = null;// 上傳圖片的文件擴展名if (imgFile.getSize() > 2 * 1024 * 1024) {out.print(getError("上傳文件大小超過限制。"));?out.close();?return;?} else {originalFileName = imgFile.getOriginalFilename();System.out.println("上傳的圖片文件名=" + originalFileName);fileExtensionName = originalFileName.substring(originalFileName.lastIndexOf("."), originalFileName.length()).toLowerCase();System.out.println("圖片文件擴展名=" + fileExtensionName);if (imgFile.getSize() != 0) {Map<String, Object> result = ImageUtil.getInstance().uploadImgByUuid(Constants.UPLOAD_IMG_MESSAGE,imgFile);if (result.get("statusCode") == "300") {//out.println("<script type=\"text/javascript\">");// out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'',"// + result.get("message") + ");");//returnKindEditorMsg(result.get("message").toString(), request, response);//out.println("</script>");}String s = (String) result.get("message");String s1 = s.replace('\\', '/');String imageUrl = url + "/"+s1;JSONObject obj = new JSONObject();???obj.put("error", 0);???obj.put("url",imageUrl);???out.print(obj.toJSONString());?out.close();?}}} catch (Exception e) {msg = "接口調用異常";jsonResult = JsonResult.jsonValidateReturn(false, e.getMessage());LogService.getInstance(this).error("保存消息信息失敗" + e.getMessage());/* return jsonResult; */}}

最終效果

點擊上傳圖片按鈕

上傳之后

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的SSM+KindEditor实现富文本编辑器图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。