UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。百度UEditor的推出,可以帮助不少网站开发者在开发富文本编辑器所遇到的难题,节约开发者因开发富文本编辑器所需要的大量时间,有效降低了企业的开发成本。
官方地址:http://ueditor.baidu.com/website/
JSP使用示例:
版本:umeditor1_2_2-utf8-jsp
1.解压压缩包,将资源放置项目文件夹下,jsp文件放置项目根目录下。
2.配置umeditor.config.js的图片上传路径,即jsp文件夹下的jsp文件。详细配置如下(项目名称为bpm):
//图片上传配置区 ,imageUrl:"/bpm/jsp/imageUp.jsp" //图片上传提交地址 ,imagePath:"/bpm/jsp/" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置 ,imageFieldName:"upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
3.表单的使用,首先引用资源文件(注意路径)。
<!--WebEdit--> <link href="linkey/oa/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet"> <script type="text/javascript" charset="utf-8" src="linkey/oa/umeditor/umeditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="linkey/oa/umeditor/umeditor.min.js"></script> <script type="text/javascript" src="linkey/oa/umeditor/lang/zh-cn/zh-cn.js"></script> <script> //获取编辑器内容 function getContent() { var arr = []; arr.push(UM.getEditor('myEditor').getContent()); return arr.join("\n"); } //加载编辑器内容 function setContent() { var body = $("#Body").text(); if(body!=""){ um.setContent(body); } } </script> <body style="margin:0px 5px 0px 5px;" > <script style="width: 99%; height: 360px;" id="myEditor" type="text/plain"></script> <textarea style="display: none;" id="Body" name="Body"></textarea> <script type="text/javascript"> var um = UM.getEditor('myEditor');setContent(); </script> </body>