百度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文件，如下图所示： 

Html代码  

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

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

Js代码  

1. <DIV id=myEditor></DIV>   
2. <script type="text/javascript">  
3. var editor;  
4.         var noteEditor;  
5.         $(document).ready(function(){  
6.             editor = new baidu.editor.ui.Editor({  
7.                 initialFrameWidth:760,  
8.                 initialContent:'流程描述!',  
9.                 textarea:'descriptionEditor'  
10.             });   
11.             editor.render("myEditor");  
12.                });        
13. </script>  

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


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


        解决办法: 要设置window.UEDITOR_HOME_URL的值，这个相当于要告诉ueditor的contextPath吧，根据项目的情况进行设置，我们项目中设置如下： 
 
看一下目录，这样就解决了，否则加载其他的文件就会报错了 

Java代码  

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

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


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


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


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

Js代码  

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

        3.只读ueditor的实现 


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

Js代码  

1. <script type="text/javascript">  
2.         var editor;  
3.         var noteEditor;  
4.         $(document).ready(function(){  
5.             editor = new baidu.editor.ui.Editor({  
6.                 initialFrameWidth:760,  
7.                 initialContent:'流程描述!',  
8.                 textarea:'descriptionEditor',  
9.                 readonly:true  
10.             });   
11.             editor.render("myEditor");   
12.             editor.setContent('${process.description}');  
13.        });  

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

Js代码  

1. <script type="text/javascript">  
2.         var editor;  
3.         var noteEditor;  
4.         $(document).ready(function(){  
5.             editor = new baidu.editor.ui.Editor({  
6.                 initialFrameWidth:760,  
7.                 initialContent:'流程描述!',  
8.                 textarea:'descriptionEditor',  
9.                 readonly:true  
10.             });   
11.             editor.render("myEditor");   
12.             editor.ready(function(){  
13.                 editor.setContent('${process.description}');  
14.             });  
15.       });  

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