百度uedtor集成总结

      本人原创，转帖必究! 发现一些网站无道德的抓取，请自觉删去内容，转载请注明出处: http://asialee.iteye.com/blog/1749341


       项目中由于用到富文本编辑功能，所以简单调研了下，发现百度开源的ueditor不错，研究了下，并集成到项目中了，现在将集成的步骤记录下，供大家参考。
       1. 首先应该去官网，http://ueditor.baidu.com/website/ipanel/panel.html#，我后台是java的，其实这个选择语言只是与图片和附件上传有关。
       2. 下载下来后后很多目录，具体的解释如下：

      3. 在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录，此处在项目根目录下建立，我们姑且起名为ueditor。
      4. 拷贝源码包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夹中，如下图所示：
     
      5. 引入一些js文件，如下图所示：

<SCRIPT type=text/javascript src="<%=basePath%>resources/ueditor/editor_config.js"></SCRIPT> 
<SCRIPT type=text/javascript src="<%=basePath%>resources/ueditor/editor_all.js"></SCRIPT> 
<LINK rel=stylesheet href="<%=basePath%>resources/ueditor/themes/default/css/ueditor.css">

        6. 加入初始化代码示例化editor：

<DIV id=myEditor></DIV> 
<script type="text/javascript">
var editor;
		var noteEditor;
		$(document).ready(function(){
			editor = new baidu.editor.ui.Editor({
		    	initialFrameWidth:760,
		    	initialContent:'流程描述!',
		    	textarea:'descriptionEditor'
		    }); 
		    editor.render("myEditor");
               });		
</script>

        随便解释一下，在初始化的时候可以传递很多参数的，现在项目用的比较简单，第一个参数initialFrameWidth，是标识这个富文本编辑框的宽度是760px,默认好像是1000px,initialContext表明textarea里面的初始值是流程描述，第三个参数标识textarea的名称是descriptionEditor.
       至此应该一个简单的就出现了，我在用的过程中遇到了下面的几个问题。


        1.报js加载错误，很多文件的加载路径不正确


        解决办法: 要设置window.UEDITOR_HOME_URL的值，这个相当于要告诉ueditor的contextPath吧，根据项目的情况进行设置，我们项目中设置如下：

看一下目录，这样就解决了，否则加载其他的文件就会报错了

<script type="text/javascript">
window.UEDITOR_HOME_URL="<%=basePath%>/resources/ueditor/";
</script>

        2.文件上传不ok，上传失败


        解决办法: 看了下代码，ueditor里面已经默认实现了uditor.Uploader，这个里面实现了文件上传，上传路径和预览路径在editor_config.js里面可以进行配置。需要将这个类放到源码包里面，如果路径有改动，则/ueditor/jsp下面的文件路径都需要改动，建议可以先别改动，先做做测试，默认是上传到/ueditor/upload/下面的


        3.ueditor使用jquery.form.js进行ajax提交失败


        解决办法: 之前表单提交是用form的，但是需要修改成ajax提交方式，但是死活js提交不行，所以没有办法，在表达提交的时候临时用了下面一行比较恶心的代码了，如果有人知道可以回复我。

<input type="hidden" name="description"  id="description">
$("#description").val(editor.getContent());

        3.只读ueditor的实现


        解决办法: 开始的时候想当然，看到option里面有readonly属性，然后又有setConent方法，应该调用一下就ok了，起始的时候代码如下，这个是报错误的，

<script type="text/javascript">
		var editor;
		var noteEditor;
		$(document).ready(function(){
			editor = new baidu.editor.ui.Editor({
		    	initialFrameWidth:760,
		    	initialContent:'流程描述!',
		    	textarea:'descriptionEditor',
		    	readonly:true
		    }); 
		    editor.render("myEditor"); 
		    editor.setContent('${process.description}');
       });

      后来没有办法，查了下文档，需要将setContext放到onready函数里面，然后修改下就不报错了，代码如下：

<script type="text/javascript">
		var editor;
		var noteEditor;
		$(document).ready(function(){
			editor = new baidu.editor.ui.Editor({
		    	initialFrameWidth:760,
		    	initialContent:'流程描述!',
		    	textarea:'descriptionEditor',
		    	readonly:true
		    }); 
		    editor.render("myEditor"); 
		    editor.ready(function(){
		    	editor.setContent('${process.description}');
		    });
      });

      小小总结一下，这个富文本编辑框个人感觉实现的挺好，在baidu的各个产品线中也多有使用，集成起来感觉难度也不大，用起来也比较方便，将这个推荐给各位，也欢迎大家交流这个。

评论

4 楼 abc382410124 2013-09-22  

学习了 有机会用一下

3 楼 asialee 2013-07-10  

cangkongtian 写道

  


      

怎么了？

2 楼 cangkongtian 2013-07-10  

  


      

1 楼 aliahhqcheng 2013-07-09  

找个时间试一下