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();
  });

Wie im vorherigen Artikel müssen Keyup- und Mouseup-Bindungen für das Div des Editors durchgeführt werden, um die Auswahl und den Bereich zu speichern, sodass das Bild auch nach dem Verlust des Fokus weiterhin an der ursprünglichen Position eingefügt werden kann. Fügen Sie einfach Image(html) direkt beim Aufruf ein. Was hier verwendet wird, ist kein iframe, sondern ein div contenteditable=true.

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ügt

Download

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.