1.初始化
1. 1 創建basic_common.html文件
在Demo目錄下創建 basic_common.html 文件，填入下面的html代碼，初始化UEditor。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>常用方法</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> <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script> </head> <body> <div> <h1>常用方法</h1> <script id="editor" type="text/plain" style="width:100%;height:500px;">hello world!</script> </div> <script type="text/javascript"> //實例化編輯器 var editor= UE.getEditor('editor'}); </script> </body> </html>
1.2 ready()
編輯器對外提供了ready()方法， 編輯器ready之后所執行的回調, 如果在注冊事件之前編輯器已經ready，將會立即觸發該回調。
editor.ready( function(editor) { editor.setContent('初始化完畢'); });
2.內容
2.1 設置內容
設置編輯器的內容，替換編輯器當前的html內容
<button onclick="setContent()">設置內容</button>
function setContent() { editor.setContent('歡迎使用ueditor'); }
2.2 追加內容
設置編輯器的內容，可修改編輯器當前的html內容
<button onclick="setContent(true)">追加內容</button>
function setContent(isAppendTo) { editor.setContent('我是追加的內容！',isAppendTo); }
2.3 獲取html內容
<button onclick="getContent()">獲得內容</button>
function getContent() { alert(editor.getContent()); }
2.4 獲取純文本內容
<button onclick="getContentTxt()">獲得純文本</button>
function getContentTxt() { alert(editor.getContentTxt()); }
2.5 獲取保留格式的文本內容
<button onclick="getPlainTxt()">獲得帶格式的純文本</button>
function getPlainTxt() { alert(editor.getPlainTxt()) }
2.6 判斷編輯器是否有內容
<button onclick="hasContent()">判斷是否有內容</button>
function hasContent() { alert(editor.hasContents()); }
2.7 獲得當前選中的文本
<button onclick="getText()">獲得當前選中的文本</button>
function getText() { alert(editor.selection.getText()); }
3.其他
這一節主要會講解獲取焦點、失去焦點、是否獲得焦點、可以編輯、禁用編輯、隱藏編輯器、顯示編輯器、創建新的編輯器、銷毀編輯器、以及對編輯器的長寬進行初始化設置等功能，由於比較簡單，所以在此不一一展開說明了，具體請看下面代碼。
<div> <button onclick="setFocus()">使編輯器獲得焦點</button> <button onmousedown="isFocus(event)">編輯器是否獲得焦點</button> <button onmousedown="setblur(event)" >編輯器失去焦點</button> <button id="enable" onclick="setEnabled()">可以編輯</button> <button onclick="setDisabled()">不可編輯</button> <button onclick="setHide()">隱藏編輯器</button> <button onclick="setShow()">顯示編輯器</button> <button onclick="setHeight(300)">設置高度為300默認關閉了自動長高</button> <button onclick="createEditor()">創建編輯器</button> <button onclick="deleteEditor()">刪除編輯器</button> </div>
//獲取焦點 function setFocus() { editor.focus(); } //編輯器是否獲取焦點 function isFocus(e){ alert(editor.isFocus()); UE.dom.domUtils.preventDefault(e) } //編輯器失去焦點 function setblur(e){ editor.blur(); UE.dom.domUtils.preventDefault(e) } //不可編輯 function setDisabled() { editor.setDisabled('fullscreen'); disableBtn("enable"); } //可以編輯 function setEnabled() { editor.setEnabled(); enableBtn(); } //灰掉工具欄按鈕 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 setHide(){ editor.setHide(); } //顯示編輯器 function setShow(){ editor.setShow(); } //設置編輯器高度 function setHeight(hight){ editor.setHeight(hight); } //創建編輯器 function createEditor() { enableBtn(); editor = UE.getEditor('editor'); } //銷毀編輯器 function deleteEditor() { disableBtn(); editor.destroy(); }