背景：最近公司要在公司門戶網(wǎng)站上加入一個新聞公告的功能，要求：文員不懂代碼稳摄，不懂?dāng)?shù)據(jù)庫，總之是只能復(fù)制粘貼的操作饲宿，要自定義格式的添加新聞厦酬，然后在門戶顯示胆描。我一想，這是要做后臺的添加和前臺的帶格式顯示數(shù)據(jù)功能仗阅。而后昌讲，數(shù)據(jù)庫，前臺的顯示界面我都做好了减噪。目前問題還剩下兩個：后臺添加新聞短绸，又要使得前臺顯示的時候是保留格式的(eg:段落開頭空兩格，一段結(jié)束換行等等),那么問題集中到數(shù)據(jù)庫了旋廷，存儲的數(shù)據(jù)是要帶樣式的鸠按。由于筆主之前做過安卓，安卓在處理這樣的問題饶碘，一般都是Json數(shù)據(jù)串封裝好數(shù)據(jù)進(jìn)行傳遞，但是目前公司小馒吴，人員不足扎运，web前后臺都由我來做，那這樣的數(shù)據(jù)必須得由我自己來封裝饮戳，我總不可能一個個去寫css樣式吧豪治，于是查閱資料，知道有富文本這樣的控件扯罐。選中了平時用的多的百度貼吧的控件-UMeditor负拟。下面就來做一下簡單的搭建和數(shù)據(jù)獲取。
1.http://ueditor.baidu.com/website/umeditor.html ? 首先上官網(wǎng)下載Demo歹河。由于筆主是JAVA開發(fā)掩浙，下載的是JSP版本的。而后解壓秸歧，打開index.html就可以體驗一下這款編輯器的強大之處啦厨姚。
2.怎么在MyEclipse里面進(jìn)行開發(fā)呢？官方有簡易的幫助文檔键菱。當(dāng)然文檔很多時候也有很多坑谬墙，踩著踩著就習(xí)慣了。经备。拭抬。我是這么做的：
<1>在MyEclipse里面新建一個Web Project。比如我叫:UMeditorDemo侵蒙。
<2>在WebRoot下右鍵import-General(記得不是選擇Existing Projects into WorkSpace,而是選File System),選擇解壓出來的官方Demo文件夾造虎，如下
<3>導(dǎo)入進(jìn)來，jsp下面的ImageUp.jsp文件會報錯蘑志，這是由于
<%@ page import="com.baidu.ueditor.um.Uploader" %>
這里的包找不到了累奈。解決方式：在src下面新建包com.baidu.ueditor.um ? ? ?把jsp下面的Uploader.java文件復(fù)制過去贬派。并且把jsp下面的commons-fileupload-1.2.2和ueditor-mini兩個Jar包添加依賴。刷新項目澎媒，報錯就解決了搞乏。
<4>將項目文件部署到tomcat上，訪問地址http://localhost:8080//UMeditorDemo/index.html戒努。會出來編輯器请敦，那么恭喜，環(huán)境搭建成功储玫。
<5>如果想自己創(chuàng)建一個頁面侍筛，生成編輯器呢？
? ? ? ? ? ? (1)創(chuàng)建一個頁面(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)在之前新建的包里面創(chuàng)建一個Servlet類(比如我叫InfoServlet)蛤奥。繼承HttpServlet,重寫doGet方法佳镜，尤其重要的是要對編輯器加上name="myEditor"屬性，否則拿到的為null凡桥，再就是轉(zhuǎn)換成utf-8編碼中文就可以顯示了蟀伸。
3.筆者踩過的坑
(1)這個編輯器親測可以添加文章段落，圖片缅刽，但是不能直接復(fù)制word里面的表格啊掏，百度貼吧的回復(fù)也不能直接粘貼word的表格。如果想實現(xiàn)表格一鍵粘貼拷恨，可能要做其他的處理脖律，或者用其它更加專業(yè)的富文本編輯器。
(2)對于SSH是支持的腕侄，筆者就是用的SSH框架小泉，通過后臺的添加，以模型驅(qū)動的方式來完成新聞的數(shù)據(jù)錄入(name屬性還是要有哦)冕杠。
? ? (3)通過編輯器的添加微姊，圖片默認(rèn)會存在tomcat的項目文件下的jsp\upload里面。圖片是可以拖拽放大縮小的分预，保存的時候就是編輯的樣子兢交。對于圖片排版顯示還得自己在jsp頁面優(yōu)化一下。
后記：Ueditor笼痹，Aloha Editor配喳，TinyEditor酪穿，ReditorReditor，jHtmlArea晴裹，wang-editor被济，CKEditorCKEditor等等都是富文本編輯器，除此之外還有很多涧团。建議在使用的時候看看哪個更適合自己的使用環(huán)境只磷。當(dāng)然，對于Ueditor的功能還有很多泌绣，后面有探索钮追，我會再加進(jìn)來，O(∩_∩)O
