背景：最近公司要在公司門戶網(wǎng)站上加入一個(gè)新聞公告的功能，要求：文員不懂代碼，不懂?dāng)?shù)據(jù)庫，總之是只能復(fù)制粘貼的操作，要自定義格式的添加新聞，然后在門戶顯示。我一想，這是要做后臺(tái)的添加和前臺(tái)的帶格式顯示數(shù)據(jù)功能。而后，數(shù)據(jù)庫，前臺(tái)的顯示界面我都做好了。目前問題還剩下兩個(gè)：后臺(tái)添加新聞，又要使得前臺(tái)顯示的時(shí)候是保留格式的(eg:段落開頭空兩格，一段結(jié)束換行等等),那么問題集中到數(shù)據(jù)庫了，存儲(chǔ)的數(shù)據(jù)是要帶樣式的。由于筆主之前做過安卓，安卓在處理這樣的問題，一般都是Json數(shù)據(jù)串封裝好數(shù)據(jù)進(jìn)行傳遞，但是目前公司小，人員不足，web前后臺(tái)都由我來做，那這樣的數(shù)據(jù)必須得由我自己來封裝，我總不可能一個(gè)個(gè)去寫css樣式吧，于是查閱資料，知道有富文本這樣的控件。選中了平時(shí)用的多的百度貼吧的控件-UMeditor。下面就來做一下簡(jiǎn)單的搭建和數(shù)據(jù)獲取。
1.http://ueditor.baidu.com/website/umeditor.html ? 首先上官網(wǎng)下載Demo。由于筆主是JAVA開發(fā)，下載的是JSP版本的。而后解壓，打開index.html就可以體驗(yàn)一下這款編輯器的強(qiáng)大之處啦。
2.怎么在MyEclipse里面進(jìn)行開發(fā)呢？官方有簡(jiǎn)易的幫助文檔。當(dāng)然文檔很多時(shí)候也有很多坑，踩著踩著就習(xí)慣了。。。我是這么做的：
<1>在MyEclipse里面新建一個(gè)Web Project。比如我叫:UMeditorDemo。
<2>在WebRoot下右鍵import-General(記得不是選擇Existing Projects into WorkSpace,而是選File System),選擇解壓出來的官方Demo文件夾，如下
<3>導(dǎo)入進(jìn)來，jsp下面的ImageUp.jsp文件會(huì)報(bào)錯(cuò)，這是由于
<%@ page import="com.baidu.ueditor.um.Uploader" %>
這里的包找不到了。解決方式：在src下面新建包c(diǎn)om.baidu.ueditor.um ? ? ?把jsp下面的Uploader.java文件復(fù)制過去。并且把jsp下面的commons-fileupload-1.2.2和ueditor-mini兩個(gè)Jar包添加依賴。刷新項(xiàng)目，報(bào)錯(cuò)就解決了。
<4>將項(xiàng)目文件部署到tomcat上，訪問地址http://localhost:8080//UMeditorDemo/index.html。會(huì)出來編輯器，那么恭喜，環(huán)境搭建成功。
<5>如果想自己創(chuàng)建一個(gè)頁面，生成編輯器呢？
? ? ? ? ? ? (1)創(chuàng)建一個(gè)頁面(eg:我取名MyJsp.jsp)。引入官方文檔中的js文件，demo中的index.jsp里也可以查看。
? ? ? ? ? ? (2)在body里面引用一段script? ? <script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
? ? ? ? ? ? (3)在body外用Js實(shí)例化編輯器 ? ? var um = UM.getEditor('myEditor');
<6>如果要將編輯器里面的文本或者圖片傳遞到后臺(tái)接受呢?也很簡(jiǎn)單。
(1)首先給編輯器添加一個(gè)form表單，定義個(gè)訪問的action地址。
(2)在之前新建的包里面創(chuàng)建一個(gè)Servlet類(比如我叫InfoServlet)。繼承HttpServlet,重寫doGet方法，尤其重要的是要對(duì)編輯器加上name="myEditor"屬性，否則拿到的為null，再就是轉(zhuǎn)換成utf-8編碼中文就可以顯示了。
3.筆者踩過的坑
(1)這個(gè)編輯器親測(cè)可以添加文章段落，圖片，但是不能直接復(fù)制word里面的表格，百度貼吧的回復(fù)也不能直接粘貼word的表格。如果想實(shí)現(xiàn)表格一鍵粘貼，可能要做其他的處理，或者用其它更加專業(yè)的富文本編輯器。
(2)對(duì)于SSH是支持的，筆者就是用的SSH框架，通過后臺(tái)的添加，以模型驅(qū)動(dòng)的方式來完成新聞的數(shù)據(jù)錄入(name屬性還是要有哦)。
? ? (3)通過編輯器的添加，圖片默認(rèn)會(huì)存在tomcat的項(xiàng)目文件下的jsp\upload里面。圖片是可以拖拽放大縮小的，保存的時(shí)候就是編輯的樣子。對(duì)于圖片排版顯示還得自己在jsp頁面優(yōu)化一下。
后記：Ueditor，Aloha Editor，TinyEditor，ReditorReditor，jHtmlArea，wang-editor，CKEditorCKEditor等等都是富文本編輯器，除此之外還有很多。建議在使用的時(shí)候看看哪個(gè)更適合自己的使用環(huán)境。當(dāng)然，對(duì)于Ueditor的功能還有很多，后面有探索，我會(huì)再加進(jìn)來，O(∩_∩)O
