背景：最近公司要在公司門戶網站上加入一個新聞公告的功能，要求：文員不懂代碼，不懂數據庫，總之是只能復制粘貼的操作，要自定義格式的添加新聞，然后在門戶顯示。我一想，這是要做后臺的添加和前臺的帶格式顯示數據功能。而后，數據庫，前臺的顯示界面我都做好了。目前問題還剩下兩個：后臺添加新聞，又要使得前臺顯示的時候是保留格式的(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
