场景

KindEitor官方文档：

/demo.php

实现

效果

下载Kindeditor

下载地址：

/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>

具体参数说明参照官方文档：

/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; */}}

最终效果

点击上传图片按钮

上传之后