ueditor常见用法
1.在ueditor光標處插入內容使用( inserthtml )
?
UE.getEditor('editor').execCommand('inserthtml', text);
2.在ueditor已有內容的末尾追加內容使用
?
UE.getEditor(Emotion.TchUeditor).setContent('testtext', true);
?
3.光標焦點在ueditor顯示使用
UE.getEditor(Emotion.TchUeditor).focus();// 此時光標出現在ueditor最前面
UE.getEditor(Emotion.TchUeditor).focus(true);// 此時光標出現在ueditor最后面
?
4.在ueditor中添加一個或多個新的或者改變原有的按鈕（小圖標）
?
UE.registerUI('button', function(editor, uiName) {
????//注冊按鈕執行時的command命令，使用命令默認就會帶有回退操作
????editor.registerCommand(uiName, {
????????execCommand: function() {
????????????alert('execCommand:' + uiName)
????????}
????});
????//創建一個button
????var btn = new UE.ui.Button({
????????//按鈕的名字
????????name: uiName,
????????//提示
????????title: uiName,
????????//添加額外樣式，指定icon圖標，這里默認使用一個重復的icon
????????cssRules: 'background-position: -500px 0;',
????????//點擊時執行的命令
????????onclick: function() {
????????????//這里可以不用執行命令,做你自己的操作也可
????????????editor.execCommand(uiName);
????????}
????});
????//當點到編輯內容上時，按鈕要做的狀態反射
????editor.addListener('selectionchange', function() {
????????var state = editor.queryCommandState(uiName);
????????if (state == -1) {
????????????btn.setDisabled(true);
????????????btn.setChecked(false);
????????} else {
????????????btn.setDisabled(false);
????????????btn.setChecked(state);
????????}
????});
????//因為你是添加button,所以需要返回這個button
????return btn;});
?
添加多個按鈕
UE.registerUI('bold italic redo undo underline strikethrough', function(editor, uiName) {
????//注冊按鈕執行時的command命令，使用命令默認就會帶有回退操作
????editor.registerCommand(uiName, {
????????execCommand: function() {
????????????alert('execCommand:' + uiName)
????????}
????});
????//創建一個button
????var btn = new UE.ui.Button({
????????//按鈕的名字
????????name: uiName,
????????//提示
????????title: uiName,
????????//添加額外樣式,指定icon圖標,這里默認使用一個重復的icon
????????cssRules: 'background-position: -500px 0;',
????????//點擊時執行的命令
????????onclick: function() {
????????????//這里可以不用執行命令,做你自己的操作也可
????????????editor.execCommand(uiName);
????????}
????});
????//當點到編輯內容上時，按鈕要做的狀態反射
????editor.addListener('selectionchange', function() {
????????var state = editor.queryCommandState(uiName);
????????if (state == -1) {
????????????btn.setDisabled(true);
????????????btn.setChecked(false);
????????} else {
????????????btn.setDisabled(false);
????????????btn.setChecked(state);
????????}
????});
????//因為你是添加button,所以需要返回這個button
????return btn;});
?
?
5.Ueditor常見API列表總結（官網上有）
?
?
實例化編輯器到id為?container?的 dom 容器上：詳細
var ue = UE.getEditor('container');
設置編輯器內容：詳細
ue.ready(function() {
????ue.setContent('<p>hello!</p>');});
追加編輯器內容：詳細
ue.ready(function() {
????ue.setContent('<p>new text</p>', true);});
獲取編輯器html內容：詳細
ue.ready(function() {
????var html = ue.getContent();});
獲取純文本內容：詳細
ue.getContentTxt();
獲取保留格式的文本內容：詳細
ue.getPlainTxt();
獲取純文本內容：詳細
ue.getContentTxt();
判斷編輯器是否有內容：詳細
ue.hasContents();
讓編輯器獲得焦點：詳細
ue.focus();
讓編輯器獲得焦點
ue.blur();
判斷編輯器是否獲得焦點：詳細
ue.isFocus();
設置當前編輯區域不可編輯：詳細
ue.setDisabled();
設置當前編輯區域可以編輯：詳細
ue.setEnabled();
隱藏編輯器：詳細
ue.setHide();
顯示編輯器：詳細
ue.setShow();
獲得當前選中的文本：詳細
ue.selection.getText();
常用命令：詳細
在當前光標位置插入html內容
ue.execCommand('inserthtml', '<span>hello!</span>');
設置當前選區文本格式：詳細
ue.execCommand('bold'); //加粗
ue.execCommand('italic'); //加斜線
ue.execCommand('subscript'); //設置上標
ue.execCommand('supscript'); //設置下標
ue.execCommand('forecolor', '#FF0000'); //設置字體顏色
ue.execCommand('backcolor', '#0000FF'); //設置字體背景顏色
回退編輯器內容：詳細
ue.execCommand('undo');
撤銷回退編輯器內容：詳細
ue.execCommand('redo');
切換源碼和可視化編輯模式：詳細
ue.execCommand('source');
選中所有內容：詳細
ue.execCommand('selectall');
清空內容：詳細
ue.execCommand('cleardoc');
讀取草稿箱
ue.execCommand('drafts');
清空草稿箱
ue.execCommand('clearlocaldata');
?
?
6.Ueditor常見問題
?
實例創建后為什么直接執行接口報錯
場景
開發者在創建編輯器時后，會執行一些接口或者調用編輯命令，例如
var ue = UE.getEditor('editor');
ue.setContent('初始化的內容');//或者調用命令//ue.execCommand('inserthtml','內容');
這些代碼看起來沒有問題，編輯器實例也能正確拿到，但就是沒有效果。
UEditor創建編輯區域的原理
其實出現這種問題，其實是大家不了解UEditor的創建原理導致的。因為UEditor的編輯區域是使用iframe作為編輯容器的。所以當編輯器創建實例后，先會創建一個iframe元素，然后在iframe元素中寫入一些腳本，這些腳本會在iframe元素初始化完成時被調用。腳本的作用主要是為編輯器實例賦值iframe中的body,window,document對象的引用。 看到這里，大家就應該明白UEditor的初始化過程其實是個異步過程。
因為是個異步過程。所以場景中的書寫方式就會出現問題了。雖然工廠方法getEditor能正確返回編輯器實例，但同步的代碼ue.setContent馬上就被執行了，因為setContent是在編輯容器中寫內容，這時需要用到body,document等元素，但這些元素的引用賦值卻在異步中才做的賦值。所以才會出現直接執行setContent時會出現無效的問題。當然有時不同瀏覽器的效果會出現不同。一些高級的瀏覽器比如chrome有時是可以的，但大部分ie瀏覽器都不行。這主要是因為瀏覽器的性能所致的。
那正確的方式是什么呢？
正確的初始化方式
UEditor為開發者提供了ready接口，他會在編輯器所有的初始化操作都結束時調用。保證你要做的操作能在一個完整的初始化環境中執行。
UE.getEditor('editor').ready(function() {
????//this是當前創建的編輯器實例
????this.setContent('內容')})
UEditor的老用戶會說，不是還有個addListener可以注冊ready事件嗎？
UE.getEditor('editor').addListener('ready', function() {
????//this是當前創建的編輯器實例
????this.setContent('內容')})
確實這樣寫也能達到效果，但這樣創建有個小問題。如果的這段代碼是用在第一次創建時就沒有問題。但如果編輯器已經創建，你需要再次賦值，想使用同一段代碼，這時，這里的事件ready是不會觸發的。但你調用接口ready注入你的操作，這種方式，會判斷如果你的編輯器已經初始化完成了，那ready將會自動加載注入的內容，如果還沒有初始化結束，它會自己注冊ready事件，當完成初始化后再掉起自己。所以建議開發者使用ready接口作為初始化時注入操作。
?
如何自定義請求地址
本文檔說明修改請求地址的方法。
應用場景
ueditor 1.4.2+ 推薦使用唯一的請求地址，通過GET參數action指定不同請求類型。 但很多用戶都希望使用自己寫好的上傳地址，下面提供一種解決方法： 由于所有ueditor請求都通過editor對象的getActionUrl方法獲取請求地址，可以直接通過復寫這個方法實現，例子如下：
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
????if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
????????return 'http://a.b.com/upload.php';
????} else if (action == 'uploadvideo') {
????????return 'http://a.b.com/video.php';
????} else {
????????return this._bkGetActionUrl.call(this, action);
????}}
action類型以及說明
uploadimage：//執行上傳圖片或截圖的action名稱
uploadscrawl：//執行上傳涂鴉的action名稱
uploadvideo：//執行上傳視頻的action名稱
uploadfile：//controller里,執行上傳視頻的action名稱
catchimage：//執行抓取遠程圖片的action名稱
listimage：//執行列出圖片的action名稱
listfile：//執行列出文件的action名稱
?
如何阻止div標簽自動轉換為p標簽
背景：
剛開始使用UEditor的開發者，會發現一個現象，粘貼到編輯器中的內容如果帶有div標簽，待粘貼到編輯器之后，會發現粘貼到編輯器中的div已經被轉換為p標簽了。首先這不是一個bug,這是UEditor對于進入編輯器中的數據進行的過濾處理。在UEditor中表示段落的標簽是p標簽，很多的編輯操作都是基于p標簽進行的處理。當然我們對div標簽也做了兼容性的處理，如果你想保留div標簽不讓UEditor進行轉換也是可以的。
?
阻止轉換：
UE.getEditor('editorID', {
allowDivTransToP: false
})
總結
以上是生活随笔為你收集整理的ueditor常见用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转贴]VB函数的列表
- 下一篇： 【macOS】Macbook修改键盘映射