Heim >Web-Frontend >js-Tutorial >Nachdem der wangEditor-Editor den Fokus verliert, kann er immer noch die Bildanalyse an der ursprünglichen Position einfügen_Javascript-Fähigkeiten
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
Fügen Sie zwei Bilder gleichzeitig ein
Seien Sie dieses Mal vorsichtiger, dh6
ie7
ie8
Die Lösung ist, wenn es ie6,7,8, currentRange.pasteHTML(html); ist. Fügen Sie HTML ein, das heißt, entfernen Sie den obigen if-Kommentar. Natürlich wird nicht mehr die Bildadresse eingefügt, sondern jetzt das gesamte img-Tag
, das die Bildadresse enthält.
ie6
ie7
ie8
Ein Beispiel ist am Ende beigefügtDas Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.