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

<SCRIPTtype=text/javascriptsrc="<%=basePath%>resources/ueditor/editor_config.js"></SCRIPT>
<SCRIPTtype=text/javascriptsrc="<%=basePath%>resources/ueditor/editor_all.js"></SCRIPT>
<LINKrel=stylesheethref="<%=basePath%>resources/ueditor/themes/default/css/ueditor.css">

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

<DIVid=myEditor></DIV>
<scripttype="text/javascript">
vareditor;
varnoteEditor;
$(document).ready(function(){
editor=newbaidu.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吧，根据项目的情况进行设置，我们项目中设置如下：

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

<scripttype="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提交不行，所以没有办法，在表达提交的时候临时用了下面一行比较恶心的代码了，如果有人知道可以回复我。

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

3.只读ueditor的实现


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

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

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

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