SSH网站开发（9）Ueditor运用在SpringMVC+Spring+Hibernate中

最新推荐文章于 2018-09-25 17:33:23 发布

0 and 1

最新推荐文章于 2018-09-25 17:33:23 发布

阅读量763

点赞数

分类专栏： springmvc+spring+hibernate

本文链接：https://blog.csdn.net/wei_chong_chong/article/details/53462484

版权

springmvc+spring+hibernate 专栏收录该内容

33 篇文章 16 订阅

订阅专栏

上一节简单讲解了Ueditor的初级使用方法。这一节就把Ueditor集成到 SSH框架中。

运用到新闻模块的，添加，修改功能中

ssh框架中关于Ueditor配置方式和上一节讲解的一样。不会的请看上一节内容。

添加模块

使用思想是这样的：通过JavaScript脚本将Ueditro编辑器中的内容获取后赋值给springMVC的form表单。最终还是有springMVC的form表单提交数据到Controller

添加界面引入需要的js文件

注意标记红色的地方（必须写这样写路径，不然有可能找不到文件，显示不出来Ueditor的界面，具体请看我最下面的：可能遇到的问题：Ueditor界面显示不出来）

代码如下：

<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath }/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath }/utf8-jsp/ueditor.all.min.js">
</script>

<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath }/utf8-jsp/lang/zh-cn/zh-cn.js"></script>

getContent()方法：获取编辑器文本内容，然后赋值给springMVC的form表单

<script type="text/javascript">
//保存方法
	//实例化编辑器
	//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
	//var ue = UE.getEditor('editor');
	var ue = UE.getEditor('editor');
	function getContent() {
		var detail = document.getElementById("detail");
		var arr = [];
		//arr.push("使用editor.getContent()方法可以获得编辑器的内容");
		//arr.push("内容为：");
		arr.push(ue.getContent());
		//alert(arr.join("\n"));
		detail.value = arr;
	}
	

</script>

提交的时候调用就行了

编辑模块
编辑模块分显示和提交两个步骤，

显示：思想正好和提交相反：这次是获取form表单内容，赋值给Ueditor显示出来。

提交：提交步骤跟上面的添加一样：获取Ueditor的内容，然后赋值给form表单提交。

提交就不说了。

光说显示吧：需要注意的是，给Ueditor添加监听，确定ueditor初始化显示工作完成后，才能给Ueditor赋值 ue.setContent（）


	var ue = UE.getEditor('editor');

	function setContent() {

		var detail = document.getElementById("detail").value;
		
		//alert(detail);
		//编辑方法 // editor准备好之后才可以使用 
		ue.addListener("ready", function () { 
			
			//alert(detail);
			// ue.setContent(detail); //为什么这样写不行？跟下面的写法有什么区别吗？TMD日了狗了
	        ue.setContent(document.getElementById("detail").value); 
	       });
			 
	}

调用的时候也必须在显示Ueditor 和form表单的的下面，原因就是等ueditor初始化和form内容显示完毕两个条件确一不可如下：