如果使用的是百度編輯器,請使用135為百度編輯器開(kāi)發(fā)的插件,點(diǎn)擊可進(jìn)入。
1在頁(yè)面中調用135編輯器
通過(guò)window.open打開(kāi)135編輯器,需要傳入一個(gè)callback參數,為回調地址的url。
實(shí)現一個(gè)編輯器內容使用的js方法,供編輯完成后調用。
function show135Editor(){
var url = 'http://www.135editor.com/beautify_editor?callback=xxxx';
window.open(url,'new_window','dialogHeight:750px; dialogWidth:1000px;help:No;resizable:No;status:No;scroll:Yes');
}
function get_135editor_content($html) {
ckeditor.setData($html); // ueditor.setContent($html);
}
2設置回調地址的功能
由于調用135編輯器會(huì )有跨域的問(wèn)題,在135地址完成編輯時(shí),會(huì )將結果提交到回調地址,通過(guò)回調地址調用最上層的內容使用函數。設置內容完成后,輸出iframe調用135編輯器的關(guān)閉頁(yè)面,關(guān)閉打開(kāi)的135窗口。
注意:需要設置內容輸出編碼為utf-8格式
<script>
var onMessage = function(e){
parent.window.opener.get_135editor_content(e.data);
document.write("<iframe style=\"display:none;\" src=\"http://www.135editor.com/pages/closeWindow.html\"></iframe>");
}
if (window.addEventListener) { // all browsers except IE before version 9
window.addEventListener("message", onMessage, false);
} else {
if (window.attachEvent) { // IE before version 9
window.attachEvent("onmessage", onMessage);
}
}
</script>
3使用體驗
流程體驗:
訪(fǎng)問(wèn)地址 http://www.135editor.com/feed_backs/add
點(diǎn)擊使用135編輯器編輯內容的按鈕,
輸入編輯內容完成編輯后,點(diǎn)擊“完成編輯”按鈕
內容設置到了輸入框中。