Ich habe gestern auf Github einen guten Rich-Text-Editor wangEditor gefunden. Der Name wurde von einer chinesischen Person geschrieben. Glücklicherweise unterstützt dieser Editor IE6. Der wichtigste Punkt ist, dass er Bilder immer noch an der ursprünglichen Position einfügen kann, nachdem er den Fokus auf IE6, 7 und 8 verloren hat, und die Codemenge sehr gering ist. Ich war also sehr gespannt, wie es hergestellt wurde, und habe es ein wenig geschnitten, das ist alles
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(); } }
Dies ist viel kleiner als das Paket von kindeditor im vorherigen Artikel und sieht auf den ersten Blick klar aus.
Wie man es benutzt
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(); });
Das Beispiel in wangEditor besteht darin, externe Linkbilder einzufügen, und es kann jeweils nur ein Bild eingefügt werden. Der Quellcode von wangEditor verwendet document.execCommand("insertImage", false,html);. Bei dieser Methode gibt es jedoch ein Problem: Wenn Sie in IE6, 7 und 8 mehrere Bilder einfügen möchten, wird nur ein Bild an der ursprünglichen Position eingefügt.
Kommentieren Sie das if zuerst aus
, das die Bildadresse enthält.
ie6