最新版富文本编辑器UEditor操作教程
? ? ? ? ?最近項目中使用到了富文本編輯器，選擇的是百度的UEditor。所以對其進(jìn)行了研究，發(fā)現(xiàn)最近發(fā)布了新版本，與以往的用法有的改變。一下對UEditotr 的是用做一下詳細(xì)的介紹。
?
???????? 首先是UEditotr的下載，下載地址：http://ueditor.baidu.com/website/download.html
在這個頁面有很多下載選項，為了簡單起見，可以更具開發(fā)的環(huán)境進(jìn)行下載。我用的是JSP，所以下載的是
以下的使用說明也都是以JSP的作為介紹，其他的大同小異。
???????? 下載完成之后解壓出來。
下邊開始介紹使用方法：
一.導(dǎo)入：
??? 將解壓好的文件導(dǎo)入工程，我用的是MyEclipse，直接粘貼到工程中的WebRoot下如圖：
??? 工程中的js文件報錯是由于開發(fā)工具的問題，不用處理。
?
二.包的導(dǎo)入：
??? 在導(dǎo)入的文件中的jsp->lib下有需要導(dǎo)入的包
將這些包拷貝到WEB-INF的lib下
導(dǎo)入后有的包不能自動添加，需要手動添加一下。
?
三.簡單例子：
??? 在jsp的head中添加：
<script type="text/javascript"charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.config.js"></script>
??? <script type="text/javascript" charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.all.js"> </script>
?
body中添加：
??? <scriptid="editor" name="editor" type="text/plain" ??? style="width:1024px;height:500px;"></script>
?
?? <script type="text/javascript">
?
??? //實例化編輯器
??? //建議使用工廠方法getEditor創(chuàng)建和引用編輯器實例，如果在某個閉包下?? 引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實例
?? ?var ue = UE.getEditor('editor');
?? </script>
注意在head中的引用是否正確，一切完成后啟動程序，就能看到效果。
?
四.修改展現(xiàn)的樣式：
??? 如果你不需要這么多的功能選項，可以修改ueditor.config.js
?這是規(guī)定頁面展現(xiàn)的地方，不要的刪除即可。我只需要上傳圖片和表格，所有修改后如圖：
?
?
五.修改圖片上傳地址：
??? 這個地方，之前的版本是在ueditor.config.js修改的，但新版本中是在config.json中修改：
這里有很詳細(xì)的中文注解。修改imagePathFormat即可修改上傳圖片的地址，其他上傳功能修改相似。
?
六.上傳到云盤或別的網(wǎng)站：
??? 之前的上傳是上傳到程序所在的服務(wù)器上，這樣遲早是會沾滿資源的，所以要放到云盤或別的地方。
??? 指定上傳路勁：UE.Editor.prototype._bkGetActionUrl= UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl= function(action) {
??? if (action == 'uploadimage' || action == 'uploadscrawl' || action== 'uploadimage') {
????????? return "<c:url value='/savePic'/>";
??? } else if (action == 'uploadvideo') {
??????? return 'http://a.b.com/video.php';
??? } else {
??????? return this._bkGetActionUrl.call(this, action);
??? }
};
這樣在上傳圖片的時候就會去找/savePic路勁，實現(xiàn)你指定的上傳。在后臺寫好上傳功能即可。需注意的是上傳時，信息放在Request Payload中，后臺接收數(shù)據(jù)時，需注意（接收方法請上網(wǎng)查找，此處不做介紹）；圖片保存后，需向前臺回傳信息：
????? JSONObject result = new JSONObject();?
????? result.put("state", "SUCCESS");
//??? result.put("title", "1431917830166036926.png");
//??? result.put("original","QQ\u56fe\u724720150511105213.png");
//??? result.put("type", ".png");
????? result.put("url", request().getContextPath()+"/pledge/download?filePath="+filePath);
//??? result.put("size", "8941");
?????
????? this.renderJSON(result.toString());
?
七.表單提交：
?? 簡單的form表單提交即可。將接收的信息保存。
?
八.頁面展示：
?? 從數(shù)據(jù)庫提取信息，展示即可：
<script id="editor"name="editor" type="text/plain" style="width:1024px;height:500px;">??? <c:out value="${editor}"/>? </script>
?
九.頁面操作：
?? 頁面有時需要一些操作，比如禁止編輯，提取信息等：
?? varue = UE.getEditor('editor');
?? ue.ready(function() {
?? ue.setDisabled('fullscreen');
?? });//禁止編輯
可查看文檔：http://fex.baidu.com/ueditor/#api-common
轉(zhuǎn)載于:https://www.cnblogs.com/taocong/p/5939444.html
總結(jié)
以上是生活随笔為你收集整理的最新版富文本编辑器UEditor操作教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实现流水灯以间隔500ms的时间闪烁（系
- 下一篇： WCF中使用控件的委托，线程中的UI委托