场景

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

最终效果

点击上传图片按钮

上传之后

SSM+KindEditor实现富文本编辑器图片上传相关推荐

富文本编辑器图片上传失败的BUG解决：IndexError：list index out of range
富文本编辑器图片上传失败的BUG解决问题原因我们将通过Django上传的图片保存到了FastDFS中,而保存在FastDFS中的文件名没有后缀名(.png/.jpg/.jif),而ckeditor ...
layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
layui富文本编辑器图片上传无法回显问题解决
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
springboot整合H+,基于summernote的富文本编辑器图片上传
我在做这块任务时遇到了好几个问题,也查了一些资料,自己总结的一些东西,希望可以帮到一些有需要的朋友,废话不多说开始看代码. 首先看前台页面: 需要注意的是summernote的默认图片上传是base6 ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...
WangEditor富文本编辑器图片上传踩坑之路
最近由于业务需求,需要用到富文本编辑器,找寻了好久,起初想使用百度的ueditor,但在使用的过程中实在是遇到了太多的坑,于是另外锁定了一款富文本编辑器--wangEditor.这是一款轻量级的富文本 ...
Layui富文本编辑器图片上传接口(.NET C#)
本来想偷懒找个现成的接口,搜了一下发现没有现成的,那我在这写一个并分享给大家吧. demo打包好了在我的csdn下载中心:http://download.csdn.net/download/xiang ...
Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
vue项目 vue-quill-editor富文本编辑器+图片上传
目录基础使用: 进阶版: 使用 el-upload 图片上传: 进阶版2.0: 可拖动调整图片大小: 基础使用: 富文本编辑器: 此方法得到的图片为base64编码,图片上传在下面. npm ins ...

SSM+KindEditor实现富文本编辑器图片上传

场景

实现

效果