百度UEditor編輯器的簡單使用方法
阿新 • • 發佈：2018-12-22
百度UEditor編輯器的官方下載地址：
ueditor 官方地址：http://ueditor.baidu.com/website/index.html
開發文件地址：http://ueditor.baidu.com/website/document.html
下載地址：http://ueditor.baidu.com/website/download.html
1、簡單入門
下載UEditor:到官網下載UEditor的最新版,已經給出連線，點選官網就能跳轉過去。
然後例項化一下Ueditor：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/static/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/static/ueditor/ueditor.all.min.js"> </script> <!--建議手動加在語言，避免在ie下有時因為載入語言失敗導致編輯器載入失敗--> <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別，比如你在配置專案裡配置的是英文，這裡載入的中文，那最後就是中文--> <script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/static/ueditor/lang/zh-cn/zh-cn.js"></script> </head> <body> <!-- 載入編輯器的容器 --> <script id="editor" name="content" type="text/plain" style="width:100%;height:500px;"></script> <!-- 例項化編輯器 --> <script type="text/javascript"> var ue = UE.getEditor('editor'); </script> </body> </html>
這樣就直接例項化了一個Ueditor，執行結果：
下面對Ueditor進行取值：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/static/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/static/ueditor/ueditor.all.min.js"> </script> <!--建議手動加在語言，避免在ie下有時因為載入語言失敗導致編輯器載入失敗--> <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別，比如你在配置專案裡配置的是英文，這裡載入的中文，那最後就是中文--> <script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/static/ueditor/lang/zh-cn/zh-cn.js"></script> </head> <body> <!-- 載入編輯器的容器 --> <script id="editor" name="content" type="text/plain" style="width:100%;height:500px;"></script> <button onclick="getContent()">獲得內容</button> <button onclick="setContent()">寫入內容</button> <button onclick="setContent(true)">追加內容</button> <button onclick="getContentTxt()">獲得純文字</button> <!-- 例項化編輯器 --> <script type="text/javascript"> var ue = UE.getEditor('editor'); function getContent() { var arr = []; arr.push("使用editor.getContent()方法可以獲得編輯器的內容"); arr.push("內容為："); arr.push(UE.getEditor('editor').getContent()); alert(arr.join("\n")); } function setContent(isAppendTo) { var arr = []; arr.push("使用editor.setContent('歡迎使用ueditor')方法可以設定編輯器的內容"); UE.getEditor('editor').setContent('歡迎使用ueditor', isAppendTo); alert(arr.join("\n")); } function getContentTxt() { var arr = []; arr.push("使用editor.getContentTxt()方法可以獲得編輯器的純文字內容"); arr.push("編輯器的純文字內容為："); arr.push(UE.getEditor('editor').getContentTxt()); alert(arr.join("\n")); } </script> </body> </html>
1、點選獲取內容：如果內容框輸入的值是：努力，加油，拿高薪！，則獲取的到的內容為：
這種是帶了HTML標籤的內容。
2、 寫入內容：很簡單。
3、追加內容：就是在有內容的後面進行新增。
4、獲取純文字：獲取的是不帶HTML標籤的內容
也可以參考官方的完整Demo：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>完整demo</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script> <!--建議手動加在語言，避免在ie下有時因為載入語言失敗導致編輯器載入失敗--> <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別，比如你在配置專案裡配置的是英文，這裡載入的中文，那最後就是中文--> <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script> <style type="text/css"> div{ width:100%; } </style> </head> <body> <div> <h1>完整demo</h1> <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> </div> <div id="btns"> <div> <button onclick="getAllHtml()">獲得整個html的內容</button> <button onclick="getContent()">獲得內容</button> <button onclick="setContent()">寫入內容</button> <button onclick="setContent(true)">追加內容</button> <button onclick="getContentTxt()">獲得純文字</button> <button onclick="getPlainTxt()">獲得帶格式的純文字</button> <button onclick="hasContent()">判斷是否有內容</button> <button onclick="setFocus()">使編輯器獲得焦點</button> <button onmousedown="isFocus(event)">編輯器是否獲得焦點</button> <button onmousedown="setblur(event)" >編輯器失去焦點</button> </div> <div> <button onclick="getText()">獲得當前選中的文字</button> <button onclick="insertHtml()">插入給定的內容</button> <button id="enable" onclick="setEnabled()">可以編輯</button> <button onclick="setDisabled()">不可編輯</button> <button onclick=" UE.getEditor('editor').setHide()">隱藏編輯器</button> <button onclick=" UE.getEditor('editor').setShow()">顯示編輯器</button> <button onclick=" UE.getEditor('editor').setHeight(300)">設定高度為300預設關閉了自動長高</button> </div> <div> <button onclick="getLocalData()" >獲取草稿箱內容</button> <button onclick="clearLocalData()" >清空草稿箱</button> </div> </div> <div> <button onclick="createEditor()"> 建立編輯器</button> <button onclick="deleteEditor()"> 刪除編輯器</button> </div> <script type="text/javascript"> //例項化編輯器 //建議使用工廠方法getEditor建立和引用編輯器例項，如果在某個閉包下引用該編輯器，直接呼叫UE.getEditor('editor')就能拿到相關的例項 var ue = UE.getEditor('editor'); function isFocus(e){ alert(UE.getEditor('editor').isFocus()); UE.dom.domUtils.preventDefault(e) } function setblur(e){ UE.getEditor('editor').blur(); UE.dom.domUtils.preventDefault(e) } function insertHtml() { var value = prompt('插入html程式碼', ''); UE.getEditor('editor').execCommand('insertHtml', value) } function createEditor() { enableBtn(); UE.getEditor('editor'); } function getAllHtml() { alert(UE.getEditor('editor').getAllHtml()) } function getContent() { var arr = []; arr.push("使用editor.getContent()方法可以獲得編輯器的內容"); arr.push("內容為："); arr.push(UE.getEditor('editor').getContent()); alert(arr.join("\n")); } function getPlainTxt() { var arr = []; arr.push("使用editor.getPlainTxt()方法可以獲得編輯器的帶格式的純文字內容"); arr.push("內容為："); arr.push(UE.getEditor('editor').getPlainTxt()); alert(arr.join('\n')) } function setContent(isAppendTo) { var arr = []; arr.push("使用editor.setContent('歡迎使用ueditor')方法可以設定編輯器的內容"); UE.getEditor('editor').setContent('歡迎使用ueditor', isAppendTo); alert(arr.join("\n")); } function setDisabled() { UE.getEditor('editor').setDisabled('fullscreen'); disableBtn("enable"); } function setEnabled() { UE.getEditor('editor').setEnabled(); enableBtn(); } function getText() { //當你點選按鈕時編輯區域已經失去了焦點，如果直接用getText將不會得到內容，所以要在選回來，然後取得內容 var range = UE.getEditor('editor').selection.getRange(); range.select(); var txt = UE.getEditor('editor').selection.getText(); alert(txt) } function getContentTxt() { var arr = []; arr.push("使用editor.getContentTxt()方法可以獲得編輯器的純文字內容"); arr.push("編輯器的純文字內容為："); arr.push(UE.getEditor('editor').getContentTxt()); alert(arr.join("\n")); } function hasContent() { var arr = []; arr.push("使用editor.hasContents()方法判斷編輯器裡是否有內容"); arr.push("判斷結果為："); arr.push(UE.getEditor('editor').hasContents()); alert(arr.join("\n")); } function setFocus() { UE.getEditor('editor').focus(); } function deleteEditor() { disableBtn(); UE.getEditor('editor').destroy(); } function disableBtn(str) { var div = document.getElementById('btns'); var btns = UE.dom.domUtils.getElementsByTagName(div, "button"); for (var i = 0, btn; btn = btns[i++];) { if (btn.id == str) { UE.dom.domUtils.removeAttributes(btn, ["disabled"]); } else { btn.setAttribute("disabled", "true"); } } } function enableBtn() { var div = document.getElementById('btns'); var btns = UE.dom.domUtils.getElementsByTagName(div, "button"); for (var i = 0, btn; btn = btns[i++];) { UE.dom.domUtils.removeAttributes(btn, ["disabled"]); } } function getLocalData () { alert(UE.getEditor('editor').execCommand( "getlocaldata" )); } function clearLocalData () { UE.getEditor('editor').execCommand( "clearlocaldata" ); alert("已清空草稿箱") } </script> </body> </html>