spring mvc + xheditor编辑器的使用

这个编辑的使用有几个关键的地方，比如文件上传后后台返回的必须是一个json格式的字符串，而且这个字符串必须该文件的地址，否者插不进编辑器，还有就是上传完后是立即插入还是点击按钮插入，下面我会注明一下。（文件和图片的上传可以参照我之前的spring mvc上传：http://blog.csdn.net/yangxuan0261/article/details/9746283）

先来看前台。要先引入这个编辑器，这个非常简单。只需要头部引入js和一个指定id名的textarea标签

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"><title>My JSP 'xheditor.jsp' starting page</title><meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"><script type="text/javascript" src="xheditor-1.2.1/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="xheditor-1.2.1/xheditor-1.2.1.min.js"></script>
<script type="text/javascript" src="xheditor-1.2.1/xheditor_lang/zh-cn.js"></script><script type="text/javascript">$(document).ready(function() {var editor = $("#elm1").xheditor({tools : 'full',skin : 'vista',showBlocktag : false,internalScript : false,internalStyle : false,width : 800,height : 200,fullscreen : false,sourceMode : false,forcePtag : false,html5Upload : false,upLinkUrl : "upload100.do", //带链接文字的附件上传的actionupLinkExt : "zip,rar,txt",//带链接文字的附件的限制格式upBtnText : "上传", //图片上传按钮显示upImgUrl : "upload100.do", //图片上传的actionupImgExt : "jpg,jpeg,gif,png",//图片上传的限制格式upFlashUrl : "upload100.do",//动画文件上传的actionupFlashExt : "swf",//动画文件的限制格式upMediaUrl : "upload100.do",//多媒体文件上传的actionupMediaExt : "wmv,avi,wma,mp3,mid",//多媒体文件的限制格式onUpload : function(msg) {     //上传成功的回调函数//alert(msg);} /* blur : function() {alert("lose focus");} */});editor.focus();$("#submit").click(function() {var v_data = $("#form").serialize();$.ajax({type : "post",url : "xheditor.do",data : v_data,success : function(data) {$("#form").html("").append("<h1>success</h1><br><a href='javascript:location.reload();'>return</a>");},error : function() {alert("ajax fail");}});});});
</script></head><body><br /><form action="javascript:;" id="form"><label>name : </label><br /><input id="nameaaa" type="text" name="name" /> <br /><label>content : </label><br /><textarea id="elm1" rows="20" cols="100" name="content"></textarea><br /> <input id="reset" type="reset" value="reset" /> <inputid="submit" type="button" value="submit" /></form><br />
</body>
</html>

后台的上传代码参照我这篇文章，就不再贴了。 http://blog.csdn.net/yangxuan0261/article/details/9746283

现在说一下返回字符串的格式，因为上传成功后有个回调函数onUpload : function(msg) {}会调用这个字符串，它要求的格式必须是json格式，且格式有两种

格式一：{"err":"","msg":"http://www.xxx.com/fileUpload/xxx.jpg"}

格式二：{"err":"","msg":{"url":"http://www.xxx.com/fileUpload/xxx.jpg","localfile":"test.jpg","id":"1"}}

这个url如果前面加多一个“!”符号，则上传完成后比立即插入编辑器（!http://www.xxx.com/fileUpload/xxx.jpg）

下面看看效果

返回没加“!”的url

一返回加了“!”的url

常见的错误：xxx 上传接口发生错误！

解决方法一：关闭html5上传，默认是打开的，在参数里设置html5Upload : false,

解决方法二：就是返回的字符串不是以上两种格式，必须改为json格式且里面有url地址。

spring mvc + xheditor编辑器的使用相关推荐

Spring MVC常用注解说明
2019独角兽企业重金招聘Python工程师标准>>> 使用Spring MVC的注解及其用法和其它相关知识来实现控制器功能. 02 之前在使用Struts2实现MV ...
Spring 2.5 基于注解驱动的 Spring MVC
基于注解的配置有越来越流行的趋势,Spring 2.5 顺应这种趋势,为 Spring MVC 提供了完全基于注解的配置.本文将介绍 Spring 2.5 新增的 Sping MVC 注解功能,讲述如 ...
使用 Spring 2.5 基于注解驱动的 Spring MVC（二）
我们在 ② 处添加了一个 ModelMap 属性,其属性名为 currUser,而 ① 处通过 @SessionAttributes 注解将 ModelMap 中名为 currUser 的属性放置到 ...
Spring MVC快速入门
今天给大家介绍一下Spring MVC,让我们学习一下如何利用Spring MVC快速的搭建一个简单的web应用. 环境准备一个称手的文本编辑器(例如Vim.Emacs.Sublime Text)或 ...
通用后台管理系统（ExtJS 4.2 + Spring MVC 3.2 + Hibernate）
通用后台管理系统(ExtJS 4.2 +Spring MVC 3.2 + Hibernate) 开发语言JAVA 成品成品前端技术extjs 数据库mysql,sql server,oracle 系 ...
Spring MVC -- 国际化
在全球化的今天,现在比过去更需要编写可以在不同语言国家和地区部署的应用程序.在这方面,需要了解两个术语: 国际化:常常缩写为i18n,因为其单词internationalization以i开始,以n结 ...
Spring MVC + Thymeleaf
参考网址: https://www.cnblogs.com/litblank/p/7988689.html 一.简介 1.Thymeleaf 在有网络和无网络的环境下皆可运行,而且完全不需启动WEB应 ...
spring mvc DispatcherServlet解读
spring mvc DispatcherServlet解读 DispatcherServlet的继承和实现 IDEA按快捷键:ctrl+alt+u,就可以查看DispatcherServlet的继承 ...
Spring MVC的表单控制器——SimpleFormController .
http://blog.csdn.net/rj042/article/details/6907274 年7月微软MVP申请开始啦! CSDN十大风云博客专栏评选结果公布! Spri ...

spring mvc + xheditor编辑器的使用

spring mvc + xheditor编辑器的使用相关推荐

最新文章

热门文章