wangEditor編輯器失去焦點后仍然可以在原位置插入圖片分析
昨天在github上發(fā)現(xiàn)了一個很好的富文本編輯器wangEditor,一看名字就是中國人寫的。這個編輯器好在支持ie6+,另外最重要的一點，它在ie6,7,8上都可以做到失去焦點后仍然可以在原位置插入圖片，而且代碼量很少。于是很好奇的看看它是怎么做的，裁剪了一下，就這些
var currentRange,_parentElem,supportRange = typeof document.createRange === 'function';
function getCurrentRange() {
var selection,
range,
txt = $('editor');
if(supportRange){
selection = document.getSelection();
if (selection.getRangeAt && selection.rangeCount) {
range = document.getSelection().getRangeAt(0);
_parentElem = range.commonAncestorContainer;
}
}else{
range = document.selection.createRange();
_parentElem = range.parentElement();
}
if( _parentElem && (avalon.contains(txt, _parentElem) || txt === _parentElem) ){
parentElem = _parentElem;
return range;
}
return range;
}
function saveSelection() {
currentRange = getCurrentRange();
}
function restoreSelection() {
if(!currentRange){
return;
}
var selection,
range;
if(supportRange){
selection = document.getSelection();
selection.removeAllRanges();
selection.addRange(currentRange);
}else{
range = document.selection.createRange();
range.setEndPoint('EndToEnd', currentRange);
if(currentRange.text.length === 0){
range.collapse(false);
}else{
range.setEndPoint('StartToStart', currentRange);
}
range.select();
}
}
這可比上一篇里面的那個從kindeditor扒下來的封裝少太多了，而且看起來也是一目了然。
怎么用呢
function insertImage(html){
restoreSelection();
if(document.selection)
currentRange.pasteHTML(html);
else
document.execCommand("insertImage", false,html);
saveSelection();
}
avalon.bind($('post_input'),'mouseup',function(e){
saveSelection();
});
avalon.bind($('post_input'),'keyup',function(e){
saveSelection();
});
和上一篇里面一樣，必須要對編輯器的div進行keyup,mouseup綁定，以便保存selection,range,方便在失去焦點后仍然可以在原來位置插入圖片。調(diào)用的時候直接insertImage(html)就可以了。這里用的不是iframe,是div contenteditable=true.
wangEditor里面的例子是插入外鏈圖片，一次只能插入一張圖片。wangEditor源碼統(tǒng)一用的是document.execCommand("insertImage", false,html);。但是這個方法有個問題，就是在ie6,7,8中,如果要插入多張圖片的話，只會在原來位置插入一張圖片。
先把if注釋掉
一次插入兩張圖片
這次嚴謹點，ie6
ie7
ie8
解決方法是如果是ie6,7,8的話，currentRange.pasteHTML(html); 。插入html,也就是把上面的if注釋去掉.當然插入的不再是圖片地址了，現(xiàn)在是包含圖片地址的整個img標簽
ie6
ie7
ie8
最后附上例子下載
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關文章
這篇文章主要介紹了簡易的投票系統(tǒng)以及js刷票思路和方法，文章十分的詳盡，思路也很清晰，是篇非常不錯的文章，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
JSON.parse損壞大數(shù)字的原因解析及解決方案
從10多年前JSON在線編輯器的早期開始，用戶經(jīng)常反映編輯器有時會破壞他們JSON文檔中的大數(shù)字的問題，這篇文章主要介紹了為什么JSON.parse會損壞大數(shù)字，如何解決這個問題,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了微信小程序日歷插件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
Javascript前端UI框架Kit使用指南之kitjs事件管理
本文詳細介紹了Kitjs的事件管理功能，包括普通的Dom事件、Kit如何解決問題、代碼解析、注銷事件等。需要的朋友可以參考下。2014-11-11
這篇文章主要介紹了webpack 3.X學習之多頁面打包的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
javascript 動態(tài)創(chuàng)建表格的2種方法總結
本文給大家總結了2種使用javascript動態(tài)創(chuàng)建表格的方法，非常簡單實用，小伙伴們自己對比下看看哪種更適合你呢，一般本人是使用第一種的。2015-03-03
這篇文章主要介紹了JS簡單實現(xiàn)禁止訪問某個頁面的方法,涉及基本的頁面跳轉(zhuǎn)操作技巧,需要的朋友可以參考下2016-09-09
Javascript刷新頁面的幾種方法：location.reload()、location.replace(location)、history.go(0)、location=location、location.assign(location)、document.execCommand('Refresh')、window.navigate(location)、document.URL=location.href,js怎么只刷新當前頁面一次呢2023-09-09
這篇文章主要介紹了不容錯過的兩款Bootstrap Icon圖標選擇組件，支持自定義的圖標，拿出來分享下，絕對的干貨，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了JS按回車鍵實現(xiàn)登錄的方法,在web程序設計中非常實用的技巧,可用于表單提交的情況,具有很好的用戶體驗,需要的朋友可以參考下2014-08-08