GitHub
Hui's Blog

Eclipse下JSP中使用UEditor(以富文本编辑器为例)

1.下载UEditor

http://ueditor.baidu.com/website/download.html

版本如下:
avatar

2.解压,简单暴力地将\ueditor1_4_3-utf8-jsp\jsp\lib目录下的文件拷贝到项目的/WEB-INF/lib目录下

如图所示:
avatar
avatar

3.将除index.html文件外的文件拷贝到项目中,例如:

avatar

4.在要使用富文本编辑器的页面引入脚本:

1
2
3
4
5
<script type="text/javascript" charset="utf-8" src="<%=path%>/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=path%>/js/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="<%=path%>/js/ueditor/lang/zh-cn/zh-cn.js"></script>

如图:
avatar

5.在需要用富文本编辑器的区域添加以下脚本:

1
<script id="editor" type="text/plain" style="width:486px;height:300px;"></script>

如图:
avatar

6.在页面最下端写以下javascript脚本:

1
2
3
4
5
<script type="text/javascript">   
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
</script>

如图:
avatar

7.添加提交按钮的js脚本,用来提交内容

avatar
脚本文件:avatar
avatar
代码:

1
2
3
4
5
6
7
8
function check_post_msg_valid(){      
if(false==UE.getEditor('editor').hasContents()){
alert('请输入内容!');
return false;
}
document.getElementById("msg").value=UE.getEditor('editor').getContent();
document.forms[0].submit();
}

8.其他:

avatar

-------------本文结束-------------