使用springmvc，jsp，结合网页文本编辑器kindEditor实现基本博客编辑功能

kindEditor官网：http://kindeditor.net/demo.php

个人实践：

为了在自己的项目中引入一个类似用户写博客的功能，在网上找到了kindeditor，真心又好又易用。

一、准备工作

1、下载kindeditor，在官网上点击右上方的下载链接，我下载的是4.1.11版。由于我的项目前端采用jsp，所以将解压以后的asp,asp.net和php文件夹删掉。

在jsp文件夹里的就是在jsp下使用kindeditor的demo。需要注意的是，demo.jsp文件中有笔误，需要首先将<script charset="utf-8" src="../kindeditor.js"></script>

的src指向kindeditor-all-min.js才可以。

2、阅读demo.jsp：kindeditor的js使用K.create方法，于页面加载完毕以后，在name是content1的textarea前面自动创建博客编辑功能toolbar，最关键的uploadJson参数指定

了用户上传图片、动画、文件等媒体文件的后台处理controller。在demo.jsp中，表单提交给了demo.jsp自己，可以在jsp代码的开头部分发现，程序从request中将content1的

内容取了出来，在body中，将内容展示在form表单之前。也就是说demo.jsp中的博客编辑器提交后的内容会在编辑器上方展示出来。需要注意的是htmlspecialchars方法，它

将html标签中的相关字符进行转义，目的是将用户提交的内容在博客编辑器中显示，方便用户继续编辑已经存在的内容。这个转义的过程在项目中我们其实是放在后台处理的，

做好以后直接传给前台展示。fileManagerJson参数指定了上传后文件的编辑界面，由于我的项目不需要这个功能，所以将这个参数舍去，将allowFileManager参数置false。

afterCreate参数指定了创建博客编辑功能toolbar以后做的事，就是当用户使用ctrl+enter的时候提交表单。我不需要这功能所以也可以舍去afterCreate。

3、阅读完了demo.jsp以后，如何展示编辑工具栏，如何提交表单，如何在编辑框中显示已经存在的内容，这几个关键的基本问题就都找到答案了，下面就是实践和解决细节问题。

主要是两个后台问题，一是如何处理uploadJson参数对应的文件上传及给kindeditor返回准确的值，二是表单提交以后如何在后台取到提交的内容，由于我使用了springmvc的form

标签库，如何结合标签库也是个小问题。

二、编码和实现

1、jsp文件片段

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>${pageTitle }</title>

<link href="/Public/media/css/new/page.css" rel="stylesheet"

    type="text/css" />

<link rel="stylesheet"

    href="/Public/kindeditor/themes/default/default.css" />

<link rel="stylesheet"

    href="/Public/kindeditor/plugins/code/prettify.css" />

<script charset="utf-8" src="/Public/kindeditor/kindeditor-all-min.js"></script>

<script charset="utf-8" src="/Public/kindeditor/lang/zh-CN.js"></script>

<script charset="utf-8"

    src="/Public/kindeditor/plugins/code/prettify.js"></script>

<script>

    KindEditor.ready(function(K) {

        var editor1 = K.create('textarea[name="content"]', {

            cssPath : '/Public/kindeditor/plugins/code/prettify.css',

            uploadJson : '${pageContext.request.contextPath}/workConfig/updateContent',

            allowFileManager : false

        });

        prettyPrint();

    });

</script>

</head>

<body>

<form:form action="${formActionURL}" method="post" commandName="work">

            <div class="formDiv">

                <table width="1020" border="0">

　　　　　　　　　　　　<tr>

                        <td align="right">展示页面：</td>

                        <td align="left">

                            <textarea name="content" rows="20" cols="100" style="width: 700px; height: 200px; visibility: hidden;">

                                ${work.content }

                            </textarea>

                        </td>

                    </tr>

　　　　　　　　　　</table>

            </div>

        </form:form>

</body>

</html>

1.1：曾尝试过使用springmvc的textarea标签库<form:textarea，虽然只要将kindeditor的K.create里textarea的name改为<form:textarea的name即可(假设form:textarea的path值为"content"，那么这个标签库在被翻译成html时，textarea的name和id会被自动赋值为"content")，但由于textarea的内容会被springmvc自动赋值给表单代表的Model类的相应值，所以htmlspecialchars的转义过程就没法进行了，当然你也可以修改JavaBean的

getContent方法中加入转义过程，但这么做稍显繁琐，不如就不用form:textarea标签库，只要将其name值设置为表单Model类的属性值，内容在提交后一样会被自动赋值给对应的属性(经试验证实)。

2、文件上传处理程序片段

　　 @RequestMapping(value="/updateContent",produces = "application/json; charset=utf-8")

    @ResponseBody

    public String updateContent(MultipartHttpServletRequest request) {

        MultipartFile realMediaFile = null;

        Iterator<String> iter = request.getFileNames();

        JSONObject obj = new JSONObject();

        while (iter.hasNext()) {

            // 取得上传文件

            MultipartFile file = request.getFile(iter.next());

            if (file != null) {

                realMediaFile = file;

            }

            if (realMediaFile != null) {

                // 定义允许上传的文件扩展名

                String extStr = "gif,jpg,jpeg,png,bmp,swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb,doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2";

                List<String> extList = Arrays.asList(extStr.split(","));

                // 最大文件大小

                long maxSize = 1000000;

                // 准备好路径参数

                String uploadMediaSavePath = pathUtil.getYgbhUploadMediaDiskFolderPath(request);

                String urlRootPath = pathUtil.getYgbhUploadMediaUrlFolderPath();

                List<MultipartFile> files = new ArrayList<MultipartFile>();

                files.add(realMediaFile);

                // 保存

                String message = "";

                if (realMediaFile.getSize() > maxSize) {

                    message = "上传文件大小超过限制。";

                }

                String originalfileName = realMediaFile.getOriginalFilename();

                String suffixName = originalfileName.substring(originalfileName.lastIndexOf(".") + 1).toLowerCase();

                if (!extList.contains(suffixName)) {

                    message = "上传文件扩展名是不允许的扩展名。\n只允许[" + extStr + "]格式。";

                }

                String newFileName = "";

                try {

                    newFileName = MultipartFileUtil.saveMediaFiles(files, uploadMediaSavePath, urlRootPath).get(0);

                } catch (Exception e) {

                    message = "上传文件失败。";

                }

                try {

                    if (!message.isEmpty()) {

                        obj.put("error", 1);

                        obj.put("message", message);

                    } else {

                        obj.put("error", 0);

                        obj.put("url", urlRootPath + newFileName);

                    }

                } catch (Exception e) {

                    log.error("上传文件[" + originalfileName + "]失败。");

                    e.printStackTrace();

                }

            } else {

                try {

                    obj.put("error", 1);

                    obj.put("message", "找不到文件。");

                } catch (JSONException e) {

                    log.error("上传文件失败。");

                    e.printStackTrace();

                }

            }

            return obj.toString();

        }

        return obj.toString();

    }

2.1：使用@ResponseBody的返回值为String类型的方法，在试验后被证明是可以使用的。如果不标识@ResponseBody，返回String类型的Controller方法会将返回值视为jsp文件的路径去寻找jsp文件。而如果你打算

将返回值类型用某JavaBean来代替，心想反正使用了@ResponseBody，springmvc会将对象转换成正确的JSON格式，结果是kindeditor拿不到返回值。

2.2：由于kindeditor生成的博客编辑工具栏有批量上传按钮，所以在取得用户提交内容时，需要用iterator的方式。

2.3：看到urlRootPath变量了吗，它指向我的系统的静态资源工程，是一个只能在本系统内可以访问的不跨域url。这也牵扯到后面的一个问题。需求是：用户自己编写的博客内容，会以html的方式保存在系统的数据库中，

该段html代码必须在它被从数据库里取出并放置在一个html页面的body片段中时能够完整地展示所有内容，包括图片、动画等媒体资源内容。那么问题来了，无论我怎么设置，就算是我直接在urlRootPath前拼接“http://

XXX.XXX.XX.XX:8080”，等到内容显示在textarea编辑框中时，图片等媒体资源的src依然被kindeditor自动改为不跨域的url，也就是说，只能在系统内展示时才能看见这些非文本的内容。如何优雅地解决该问题我至今

还没找到很好的办法，只是暂时在保存博客内容html时，将所有包含不跨域url的内容前面自动加上类似“http://XXX.XXX.XX.XX:8080”的前缀，以保证该资源在任何地方都能被访问。

补充，上面划线部分的问题已经得到解决(参考资料：http://www.111cn.net/wy/255/64719.htm)，给KindEditor加一个与uploadJson同级别的运行参数，urlType:'domain',

urlTypeY有四种值，""表示不修改URL,"relative"表示相对路径,"absolute"表示绝对路径，"domain表示带域名的绝对路径"。

由于该问题已解决，所以3中的replace过程可以去掉了。

2.4:produces = "application/json; charset=utf-8"这句如果不加，返回的中文内容会是乱码。

3、表单提交内容处理程序片段

@RequestMapping(value = "/editWork", method = RequestMethod.POST)

    public ModelAndView editWork(@Valid @ModelAttribute("work") DesignerWorks work, BindingResult br,

            HttpServletRequest request) {

        ModelAndView mv = new ModelAndView();

        mv.addObject("work", work);

        if (br.hasErrors()) {

            mv.addObject("currentMenuDesc", "当前目录：首页>系统管理>作品管理>编辑作品");

            mv.addObject("backToURL", request.getContextPath() + "/workConfig/openWorkConfig");

            mv.addObject("formActionURL", request.getContextPath() + "/workConfig/editWork");

            mv.addObject("pageTitle", "编辑作品");

            mv.setViewName("editWork");

        } else {

            try {

                DesignerWorks workToSave = work;

                workToSave.setContent(workToSave.getContent().replace(pathUtil.getServerUrl(request), ""));

                workToSave.setContent(workToSave.getContent().replace(pathUtil.getUploadMediaRootUrl(),

                        pathUtil.getServerUrl(request) + pathUtil.getUploadMediaRootUrl()));

                designerService.updateWork(work);

            } catch (Exception e) {

                mv.addObject(ConstantsUtil.ERROR_STACK, ExceptionUtils.getStackTrace(e));

                mv.setViewName("error");

                return mv;

            }

            mv.addObject(ConstantsUtil.BACK_TO_URL, request.getContextPath() + "/workConfig/openWorkConfig");

            mv.setViewName("success");

        }

        return mv;

    }

3.1：可以看到媒体文件url的replace的过程，getServerUrl的代码片段如下：

import java.io.File;
import java.net.InetAddress;

import javax.servlet.http.HttpServletRequest;

public static String getServerUrl(HttpServletRequest request) throws Exception{

        return "http://"+InetAddress.getLocalHost().getHostAddress()+":"+request.getServerPort();

}

三、补充

1、问题：在之后的项目中，我使用了jquery.easyui.min.js的.form()来间接提交表单，发现由kindeditor生成的textarea内容始终无法被后台接收到。

2、调查：查看页面源码我发现，kindeditor工作时，是在被它修饰的textarea的上方加了一个div，用户输入的所有内容其实都是在编辑div中的内容而不是直接写在textarea里，

当用户使用传统方式提交表单时，kindeditor一定是自动有一个将用户输入内容粘贴入textarea的动作，而当使用js间接提交表单时，kindeditor的这个自动的动作没有被触发，所以

后台得到的是还未被粘贴内容的textarea的文本。

3、解决：最直接的想办法是手动调一下这个自动粘贴的程序。搜索了一下发现已有人解决。http://lxy.me/ajax-kindeditor-content-to-textarea.html

使用springmvc，jsp，结合网页文本编辑器kindEditor实现基本博客编辑功能的更多相关文章

python 全栈开发，Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)
一.子评论必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名定位输入框 focus focus:获取对象焦点触发事件先做样式.点击回复之后,定位到输入框, ...
easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
富文本编辑器 KindEditor 的基本使用文件上传图片上传
富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...
富文本编辑器kindeditor配置
 <link type="text/css" rel="stylesheet" href ...
后台文本编辑器KindEditor介绍
后台文本编辑器KindEditor介绍我们在自己的个人主页添加文章内容的时候,需要对文章内容进行修饰,此时就需要文本编辑器助阵了! 功能预览 KindEditor文本编辑器 KindEditor文本 ...
Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
springMVC -- 整合UEditor(富文本编辑器)
工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方 ...
JAVAEE——宜立方商城04：图片服务器FastDFS、富文本编辑器KindEditor、商品添加功能完成
1. 学习计划 1.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 2.富文本编辑器的使用KindEditor 3.商品添加功能完成 2. 图片服务器的安装 1.存储空间可扩展. 2 ...
django-应用中和amdin使用富文本编辑器kindeditor
文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...

随机推荐

Pycharm Professional破解(windows,mac)
激活码 EB101IWSWD-eyJsaWNlbnNlSWQiOiJFQjEwMUlXU1dEIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lI ...
spring security笔记
当指定http元素的auto-config=”true”时,就相当于如下内容的简写. <security:http> <security:form-login/> <se ...
Check which .NET Framework version is installed
his article will help you to know which .NET Framework version is installed from command line. Check ...
深入浅出 kvm qemu libvirt
在所谓的kvm技术中,应用到的其实有2个东西:qemu+kvmkvm负责cpu虚拟化+内存虚拟化,实现了cpu和内存的虚拟化,但kvm不能模拟其他设备:qemu是模拟IO设备(网卡,磁盘),kvm加上 ...
自然语言交流系统 phxnet团队创新实训个人博客（四）
关于项目中个使用到的自然语言语音转文字&文字转语言的个人总结: VOICE_NAME, "xiaoyan");speechSynthesizer.setParameter( ...
SAP 产品条码WMS结合以及ABAP script的集成 BarCode
条码和RFID打印解决方案 1, 热转印条码标签打印热转打印技术的原理是通过加温和加压将色带上的固体油墨熔化转印到介质上完成打印的.通过选择热转印色带与标签材料匹配,热转印打印方式可以产生耐高温 ...
fsck 工具 ——检查与修复 Linux系统上的文件系统
可能由于昨天关电脑断电源的问题, 后来开机,直接出现如下界面: 心里想,不会吧,电脑怎么又出问题了吧(上周的时候,手贱,把装系统的硬盘分区设为了非活动分区,电脑就启动不来了,后来手动引导起来的:): ...
在Unity场景中更改天空盒的步骤
一.介绍目的:在Unity场景中制作一个天空盒. 软件环境:Unity 2017.3.0f3,VS2013. 参考 skybox 二.自制一个天空盒 1,创建一个材质material 2,更改属性为 ...
c++11 std::move() 的使用
std::move函数可以以非常简单的方式将左值引用转换为右值引用.(左值.左值引用.右值.右值引用参见:http://www.cnblogs.com/SZxiaochun/p/8017475.ht ...
解决Eclipse代码分析插件SonarLint在Console输出乱码问题
在Eclipse安装目录下的eclipse.ini文件末尾加上一行 -Dfile.encoding=UTF-8 即可.

使用springmvc，jsp，结合网页文本编辑器kindEditor实现基本博客编辑功能

使用springmvc，jsp，结合网页文本编辑器kindEditor实现基本博客编辑功能的更多相关文章

随机推荐

热门专题