百度uedtor集成总结

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

项目中由于用到富文本编辑功能，所以简单调研了下，发现百度开源的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代码


<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：

Js代码


<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吧，根据项目的情况进行设置，我们项目中设置如下：



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

Java代码


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

Js代码


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

3.只读ueditor的实现

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

Js代码


<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函数里面，然后修改下就不报错了，代码如下：

Js代码


<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}');
});
});