JSF seam 中使用UEditor

最新推荐文章于 2016-08-26 16:22:26 发布

驭乐MJ

最新推荐文章于 2016-08-26 16:22:26 发布

阅读量1k

点赞数

分类专栏：利器之举 JSF and WebView

本文链接：https://blog.csdn.net/mj404/article/details/38678837

版权

利器之举同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

JSF and WebView

12 篇文章 0 订阅

订阅专栏

（写在前边：其实java ee项目中可用的富文本编辑器还是很多的，见仁见智的选择吧，不一定非要用UEditor，还有很多优秀的编辑器的，之前总结过。）

http://fex-team.github.io/ueditor/ （官方的文档）

在官方文档中没有完善使用jsp的详解，在谷歌上找到了几个在jsp中应用的例子。

下面列出：

1、chenmingang.diandian.com/post/2013-01-29/40049104272

2、www.daimami.com/web/217004.htm

3、duozhilin.blog.163.com/blog/static/184971504201331252444915/

4、www.cnblogs.com/fazstart/archive/2013/05/28/3104842.html

5、asialee.iteye.com/blog/1749341

（1）

我阅读完文档之后，参考着应用，首先在项目的view目录下建立一个ueditor目录，然后在将解压好的内容复制进来，

然后编辑view/ueditor目录下的ueditor.config.js文件设置里面的URL...

在页面里引用script

<script type="text/javascript"
	src="/playTest/view/ueditor/ueditor.config.js"></script>
<script type="text/javascript"
	src="/playTest/view/ueditor/ueditor.all.js"></script>

然后在需要应用富文本编辑的地方使用如下声明：

<script name="content" id="container" type="text/plain"> 
								测试文字！！！
					</script>

						<script type="text/javascript">
									var ue = UE.getEditor('container');
                             </script>

注意路径的书写，以及语法的单引号和双引号。

这只是初步的应用，通过官方文档的学习，你可以设置更全面的功能。

我自己写的外部的测试页面可以应用demo.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title> UEditor Test ! </title>
	</head>
	<body>
		<script type="text/javascript" src="ueditor.config.js"></script>
		<script type="text/javascript" src="ueditor.all.js"></script>
		
		<script type="text/plain" id="container" name="content">
		zhe li xie ru ni de chu shi hua de wen zi 
		</script>
		<!-- Instantiated The Editor -->
		<script type="text/javascript">
		var ue = UE.getEditor('container')
		//You can Pass some parameter in this method when you Instantiated the editor 
		//like this var ue = UE.getEditor('container' , {autoHeight:false})
		</script>
	</body>
</html>

可是按上述配置弄到项目里不行，不知是什么原因，就是尝试失败了，因为没有还没考虑使用文件上传功能，所以也没有把相应的包放到项目的lib目录下。正在排查中，这里记录下来。希望有经验的同志可以解决我的问题，解决不了的话，以后相应的功能的话可能会考虑其他的富文本编辑器。

（2）使用富文本编辑器最有难度的地方是文件上传等功能，文字编辑还是比较简单的，这方面的用法，等我解决的了最基本的问题之后，会更新细化的。

+++++++++++++++++++++++++++++++++++++2014-9-9++++++++++++++++++++++++++++++++++

首先解决在页面中实现不了编辑器的问题:

1、在使用审查元素的时候在控制台提示js路径不对，应该就是路径的问题，将项目名改成application.xml 中<display>中写的名字，因为是放到view中的，所以写的路径是/penglai/view/ueditor/但是这样写是不对的，因为ueditor默认是在view目录中的，所以应该的路径是penglai/ueditor/

2、另一个比较重大的问题是....项目使用的是xhtml页面，在xhtml中使用JS代码会出现各种问题，解决办法就是将代码放在<![[ ]]>中，，，然后考虑到兼容问题，使用//注释掉。

参考这几个网址的介绍：www.cnblogs.com/sink_cup/archive/2010/01/14/javascript_CDATA_w3c.html

www.jb51.net/web/16170.html%20%20%20%20%20%20%20%20

supanccy2013.iteye.com/blog/2038464

关于文件上传的功能日后再说，嘿嘿。。。。。