关于富文本编辑器Ueditor的使用

老师说这是一款十分强大的编辑器，我也觉得很不错，所以把这款富文本编辑器介绍给大家

ueditor下载地址：

http://ueditor.baidu.com/ 下载1.4.3 –utf8-Jsp版本。完整demo可参考下载文件中的index.html

 

导入 ueditor 到项目中；将ueditor导入到项目的js目录下。导入ueditor/jsp/lib目录中的“commons-codec-1.9.jar”、“json.jar”、“ueditor-1.1.1.jar”这几个jar包到项目的web-inf/lib目录中。

 

配置 ueditor 中图片上传前缀和路径；打开“ueditor/jsp/config.json”

注意：修改web.xml中struts过滤器的过滤规则，将/*改为*.action。避免引起struts过滤器把ueditor的图片等资源上传jsp给拦截而导致上传图片等失败。

<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>*.action</url-pattern>
</filter-mapping>

引入ueditor到jsp页面，在ueditor的ueditor.config.js文件中，要求我们需要配置好ueditor的根目录地址；在我们页面引用时也需要在js中制定UEDITOR_HOME_URL的路径。运用到页面时我们只需要将一个textarea的表单项的id和euditor实例化时的id一致即可。

将下面脚本内容引入到jsp页面中：

<script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script>
    	//配置ueditor的根路径
    	var UEDITOR_HOME_URL = "${basePath}js/ueditor/";
    	var ue = UE.getEditor('editor');
    </script>

<s:textarea id="editor" name="info.content" cssStyle="width:90%;height:160px;" />