背景:最近公司要在公司门户网站上加入一个新闻公告的功能,要求:文员不懂代码,不懂数据库,总之是只能复制粘贴的操作,要自定义格式的添加新闻,然后在门户显示。我一想,这是要做后台的添加和前台的带格式显示数据功能。而后,数据库,前台的显示界面我都做好了。目前问题还剩下两个:后台添加新闻,又要使得前台显示的时候是保留格式的(eg:段落开头空两格,一段结束换行等等),那么问题集中到数据库了,存储的数据是要带样式的。由于笔主之前做过安卓,安卓在处理这样的问题,一般都是Json数据串封装好数据进行传递,但是目前公司小,人员不足,web前后台都由我来做,那这样的数据必须得由我自己来封装,我总不可能一个个去写css样式吧,于是查阅资料,知道有富文本这样的控件。选中了平时用的多的百度贴吧的控件-UMeditor。下面就来做一下简单的搭建和数据获取。
1.http://ueditor.baidu.com/website/umeditor.html 首先上官网下载Demo。由于笔主是JAVA开发,下载的是JSP版本的。而后解压,打开index.html就可以体验一下这款编辑器的强大之处啦。
2.怎么在MyEclipse里面进行开发呢?官方有简易的帮助文档。当然文档很多时候也有很多坑,踩着踩着就习惯了。。。我是这么做的:
<1>在MyEclipse里面新建一个Web Project。比如我叫:UMeditorDemo。
<2>在WebRoot下右键import-General(记得不是选择Existing Projects into WorkSpace,而是选File System),选择解压出来的官方Demo文件夹,如下
<3>导入进来,jsp下面的ImageUp.jsp文件会报错,这是由于
<%@ page import="com.baidu.ueditor.um.Uploader" %>
这里的包找不到了。解决方式:在src下面新建包com.baidu.ueditor.um 把jsp下面的Uploader.java文件复制过去。并且把jsp下面的commons-fileupload-1.2.2和ueditor-mini两个Jar包添加依赖。刷新项目,报错就解决了。
<4>将项目文件部署到tomcat上,访问地址http://localhost:8080//UMeditorDemo/index.html。会出来编辑器,那么恭喜,环境搭建成功。
<5>如果想自己创建一个页面,生成编辑器呢?
(1)创建一个页面(eg:我取名MyJsp.jsp)。引入官方文档中的js文件,demo中的index.jsp里也可以查看。
(2)在body里面引用一段script <script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
(3)在body外用Js实例化编辑器 var um = UM.getEditor('myEditor');
<6>如果要将编辑器里面的文本或者图片传递到后台接受呢?也很简单。
(1)首先给编辑器添加一个form表单,定义个访问的action地址。
(2)在之前新建的包里面创建一个Servlet类(比如我叫InfoServlet)。继承HttpServlet,重写doGet方法,尤其重要的是要对编辑器加上name="myEditor"属性,否则拿到的为null,再就是转换成utf-8编码中文就可以显示了。
3.笔者踩过的坑
(1)这个编辑器亲测可以添加文章段落,图片,但是不能直接复制word里面的表格,百度贴吧的回复也不能直接粘贴word的表格。如果想实现表格一键粘贴,可能要做其他的处理,或者用其它更加专业的富文本编辑器。
(2)对于SSH是支持的,笔者就是用的SSH框架,通过后台的添加,以模型驱动的方式来完成新闻的数据录入(name属性还是要有哦)。
(3)通过编辑器的添加,图片默认会存在tomcat的项目文件下的jsp\upload里面。图片是可以拖拽放大缩小的,保存的时候就是编辑的样子。对于图片排版显示还得自己在jsp页面优化一下。
后记:Ueditor,Aloha Editor,TinyEditor,ReditorReditor,jHtmlArea,wang-editor,CKEditorCKEditor等等都是富文本编辑器,除此之外还有很多。建议在使用的时候看看哪个更适合自己的使用环境。当然,对于Ueditor的功能还有很多,后面有探索,我会再加进来,O(∩_∩)O