1.在ueditor光標(biāo)處插入內(nèi)容使用( inserthtml )
UE.getEditor('editor').execCommand('inserthtml', text);
2.在ueditor已有內(nèi)容的末尾追加內(nèi)容使用
UE.getEditor(Emotion.TchUeditor).setContent('testtext', true);
3.光標(biāo)焦點(diǎn)在ueditor顯示使用
UE.getEditor(Emotion.TchUeditor).focus();//此時光標(biāo)出現(xiàn)在ueditor最前面
UE.getEditor(Emotion.TchUeditor).focus(true);//此時光標(biāo)出現(xiàn)在ueditor最后面
4.在ueditor中添加一個或多個新的或者改變原有的按鈕（小圖標(biāo)）
UE.registerUI('button', function(editor, uiName) {
//注冊按鈕執(zhí)行時的command命令，使用命令默認(rèn)就會帶有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
//創(chuàng)建一個button
var btn = new UE.ui.Button({
//按鈕的名字
name: uiName,
//提示
title: uiName,
//添加額外樣式，指定icon圖標(biāo)，這里默認(rèn)使用一個重復(fù)的icon
CSSRules: 'background-position: -500px 0;',
//點(diǎn)擊時執(zhí)行的命令
onclick: function() {
//這里可以不用執(zhí)行命令,做你自己的操作也可
editor.execCommand(uiName);
}
});
//當(dāng)點(diǎn)到編輯內(nèi)容上時，按鈕要做的狀態(tài)反射
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);
}
});
//因?yàn)槟闶翘砑觔utton,所以需要返回這個button
return btn;});
添加多個按鈕
UE.registerUI('bold italic redo undo underline strikethrough', function(editor, uiName) {
//注冊按鈕執(zhí)行時的command命令，使用命令默認(rèn)就會帶有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
//創(chuàng)建一個button
var btn = new UE.ui.Button({
//按鈕的名字
name: uiName,
//提示
title: uiName,
//添加額外樣式,指定icon圖標(biāo),這里默認(rèn)使用一個重復(fù)的icon
cssRules: 'background-position: -500px 0;',
//點(diǎn)擊時執(zhí)行的命令
onclick: function() {
//這里可以不用執(zhí)行命令,做你自己的操作也可
editor.execCommand(uiName);
}
});
//當(dāng)點(diǎn)到編輯內(nèi)容上時，按鈕要做的狀態(tài)反射
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);
}
});
//因?yàn)槟闶翘砑觔utton,所以需要返回這個button
return btn;});
5.Ueditor常見API列表總結(jié)（官網(wǎng)上有）
實(shí)例化編輯器到id為 container 的dom 容器上：詳細(xì)
var ue = UE.getEditor('container');
設(shè)置編輯器內(nèi)容：詳細(xì)
ue.ready(function() {
ue.setContent('<p>hello!</p>');});
追加編輯器內(nèi)容：詳細(xì)
ue.ready(function() {
ue.setContent('<p>new text</p>', true);});
獲取編輯器html內(nèi)容：詳細(xì)
ue.ready(function() {
var html = ue.getContent();});
獲取純文本內(nèi)容：詳細(xì)
ue.getContentTxt();
獲取保留格式的文本內(nèi)容：詳細(xì)
ue.getPlainTxt();
獲取純文本內(nèi)容：詳細(xì)
ue.getContentTxt();
判斷編輯器是否有內(nèi)容：詳細(xì)
ue.hasContents();
讓編輯器獲得焦點(diǎn)：詳細(xì)
ue.focus();
讓編輯器獲得焦點(diǎn)
ue.blur();
判斷編輯器是否獲得焦點(diǎn)：詳細(xì)
ue.isFocus();
設(shè)置當(dāng)前編輯區(qū)域不可編輯：詳細(xì)
ue.setDisabled();
設(shè)置當(dāng)前編輯區(qū)域可以編輯：詳細(xì)
ue.setEnabled();
隱藏編輯器：詳細(xì)
ue.setHide();
顯示編輯器：詳細(xì)
ue.setShow();
獲得當(dāng)前選中的文本：詳細(xì)
ue.selection.getText();
常用命令：詳細(xì)
在當(dāng)前光標(biāo)位置插入html內(nèi)容
ue.execCommand('inserthtml', '<span>hello!</span>');
設(shè)置當(dāng)前選區(qū)文本格式：詳細(xì)
ue.execCommand('bold'); //加粗
ue.execCommand('italic'); //加斜線
ue.execCommand('subscr ue.execCommand('supscript'); //設(shè)置下標(biāo) ue.execCommand('forecolor', '#FF0000'); //設(shè)置 回退編輯器內(nèi)容：詳細(xì) ue.execCommand('undo'); 撤銷回退編輯器內(nèi)容：詳細(xì) ue.execCommand('redo'); 切換 6.Ueditor常見問題 實(shí)例創(chuàng)建后為什么直接執(zhí)行接口報錯 場景 開發(fā)者在創(chuàng)建編輯器時后，會執(zhí)行一些接口或者調(diào)用編輯命令，例如 var ue = UE.getEditor('editor'); ue.setContent('初始化的內(nèi)容');//或者調(diào)用命令//ue.execCommand('inserthtml','內(nèi)容'); 這些代碼看起來沒有問題，編輯器實(shí)例也能正確拿到，但就是沒有效果。 UEditor創(chuàng)建編輯區(qū)域的原理 其實(shí)出現(xiàn)這種問題，其實(shí)是大家不了解UEditor的創(chuàng)建原理導(dǎo)致的。因?yàn)閁Editor的編輯區(qū)域是使用iframe作為編輯容器的。所以當(dāng)編輯器創(chuàng)建實(shí)例后，先會創(chuàng)建一個iframe元素，然后在iframe元素中寫入一些腳本，這些腳本會在iframe元素初始化完成時被調(diào)用。腳本的作用主要是為編輯器實(shí)例賦值iframe中的body,window,document對象的引用。 看到這里，大家就應(yīng)該明白UEditor的初始化過程其實(shí)是個異步過程。 因?yàn)槭莻€異步過程。所以場景中的書寫方式就會出現(xiàn)問題了。雖然工廠方法getEditor能正確返回編輯器實(shí)例，但同步的代碼ue.setContent馬上就被執(zhí)行了，因?yàn)閟etContent是在編輯容器中寫內(nèi)容，這時需要用到body,document等元素，但這些元素的引用賦值卻在異步中才做的賦值。所以才會出現(xiàn)直接執(zhí)行setContent時會出現(xiàn)無效的問題。當(dāng)然有時不同瀏覽器的效果會出現(xiàn)不同。一些高級的瀏覽器比如Chrome有時是可以的，但大部分ie瀏覽器都不行。這主要是因?yàn)闉g覽器的性能所致的。 那正確的方式是什么呢？ 正確的初始化方式 UEditor為開發(fā)者提供了ready接口，他會在編輯器所有的初始化操作都結(jié)束時調(diào)用。保證你要做的操作能在一個完整的初始化環(huán)境中執(zhí)行。 UE.getEditor('editor').ready(function() { //this是當(dāng)前創(chuàng)建的編輯器實(shí)例 this.setContent('內(nèi)容')}) UEditor的老用戶會說，不是還有個addListener可以注冊ready事件嗎？ UE.getEditor('editor').addListener('ready', function() { //this是當(dāng)前創(chuàng)建的編輯器實(shí)例 this.setContent('內(nèi)容')}) 確實(shí)這樣寫也能達(dá)到效果，但這樣創(chuàng)建有個小問題。如果的這段代碼是用在第一次創(chuàng)建時就沒有問題。但如果編輯器已經(jīng)創(chuàng)建，你需要再次賦值，想使用同一段代碼，這時，這里的事件ready是不會觸發(fā)的。但你調(diào)用接口ready注入你的操作，這種方式，會判斷如果你的編輯器已經(jīng)初始化完成了，那ready將會自動加載注入的內(nèi)容，如果還沒有初始化結(jié)束，它會自己注冊ready事件，當(dāng)完成初始化后再掉起自己。所以建議開發(fā)者使用ready接口作為初始化時注入操作。 本文檔說明修改請求地址的方法。 ueditor 1.4.2+推薦使用唯一的請求地址，通過GET參數(shù)action指定不同請求類型。 但很多用戶都希望使用自己寫好的上傳地址，下面提供一種解決方法： 由于所有ueditor請求都通過editor對象的getActionUrl方法獲取請求地址，可以直接通過復(fù)寫這個方法實(shí)現(xiàn)，例子如下： 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：//執(zhí)行上傳圖片或截圖的action名稱 uploadscrawl：//執(zhí)行上傳涂鴉的action名稱 uploadvideo：//執(zhí)行上傳視頻的action名稱 uploadfile：//controller里,執(zhí)行上傳視頻的action名稱 catchimage：//執(zhí)行抓取遠(yuǎn)程圖片的action名稱 listimage：//執(zhí)行列出圖片的action名稱 listfile：//執(zhí)行列出文件的action名稱 如何阻止div標(biāo)簽自動轉(zhuǎn)換為p標(biāo)簽 背景： 剛開始使用UEditor的開發(fā)者，會發(fā)現(xiàn)一個現(xiàn)象，粘貼到編輯器中的內(nèi)容如果帶有div標(biāo)簽，待粘貼到編輯器之后，會發(fā)現(xiàn)粘貼到編輯器中的div已經(jīng)被轉(zhuǎn)換為p標(biāo)簽了。首先這不是一個bug,這是UEditor對于進(jìn)入編輯器中的數(shù)據(jù)進(jìn)行的過濾處理。在UEditor中表示段落的標(biāo)簽是p標(biāo)簽，很多的編輯操作都是基于p標(biāo)簽進(jìn)行的處理。當(dāng)然我們對div標(biāo)簽也做了兼容性的處理，如果你想保留div標(biāo)簽不讓UEditor進(jìn)行轉(zhuǎn)換也是可以的。 阻止轉(zhuǎn)換： UE.getEditor('editorID', { allowDivTransToP: false })如何自定義請求地址
應(yīng)用場景
action類型以及說明
新聞熱點(diǎn)
疑難解答
