UEditor是由百度WEB前端研發部開發的所見即所得的開源富文本編輯器，具有輕量、可定制、用戶體驗優秀等特點。今天我們就開始學習一下。大致的效果圖如下
UEditor的jsp環境搭建
一、下載ueditor，url地址：http://ueditor.baidu.com/website/download.html#ueditor
這里我下載的是jsp版本的uft-8，目前ueditro僅支持上述4種語言的環境。
二、ueditor在eclipse上的部署
- 在eclipse部署tomcat環境，這個就不多做介紹，Preferences --> Runtime Environment --> add --> 選擇tomcat的安裝目錄。如下
- 在Eclipse中創建一個名為JspUeditor的Dynamic Web project項目：
- 將解壓后ueditor的相關資源導入到項目中，在項目下的“WebContent”目錄上右擊，在彈出的菜單中選擇：Import->Import...，彈出如下圖所示對話框：
選擇File System，在browse中選擇ueditor的解壓路徑，如下：
將webcontent-->jsp下的lib下的jar包復制到WEb-INF下的lib文件夾下，之后刪除jsp下的lib文件夾
- 添加該項目到Tomcat中，並啟動Tomcat。在瀏覽器運行：http://localhost:8080/JspUeditor/jsp/controller.jsp?action=config得到如下界面，表示成功
- 運行http://localhost:8080/JspUeditor/index.html會得到以下界面：
- 在ie8上，使用ueditor出現錯誤: 'document.body' 為空或不是對象。
解決方案： 把var ue = UE.getEditor('editor')等代碼放在</body>前面且包含在<body>中。
ueditor的基礎使用
一、 在jsp頁面中引入ueditor的支持：
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.js"> </script> <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
二、 在jsp頁面中定義：
<div> <script id="editor" type="text/plain" style="width:980;height:500px;"></script> <input type="hidden" id="ProductContent" name="ProductContent" value=""/> </div>
三、 在js中初始化ueditor：
<script type="text/javascript"> UE.getEditor('editor'); </script>
四、 得到ueditor的數據，並且提交表單：
function doIt(clickObj){ document.forms[0].ProductContent.value = UE.getEditor('editor').getContent(); document.forms[0].action="DirectFinanceAgreementAdd.do"; document.forms[0].submit(); }
五、在ueditor.config.js中可以配置一些ueditor的特性。比如可以輸入的字數上限、菜單的顯示等等。
友情鏈接
- ueditor的使用文檔：http://fex.baidu.com/ueditor/
- ueditor的api文檔： http://ueditor.baidu.com/doc/