百度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的各个产品线中也多有使用，集成起来感觉难度也不大，用起来也比较方便，将这个推荐给各位，也欢迎大家交流这个。