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('subscr ue.execCommand('supscript'); //設置下標 ue.execCommand('forecolor', '#FF0000'); //設置 回退編輯器內容：詳細 ue.execCommand('undo'); 撤銷回退編輯器內容：詳細 ue.execCommand('redo'); 切換 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); }} 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 })如何自定義請求地址
應用場景
action類型以及說明
新聞熱點
疑難解答
