老师说这是一款十分强大的编辑器,我也觉得很不错,所以把这款富文本编辑器介绍给大家
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;" />