Wangeditor editor loses focus and can still insert picture analysis _javascript tips in the original location

A good Rich text editor was found on the GitHub yesterday Wangeditor, and the name is written by the Chinese. The editor is good at supporting ie6+, and the most important point is that it can still be inserted in the original position after losing focus on the ie6,7,8, with little code. So I was curious to see how it was done, cropped it up, and that's the

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

That's a lot less than the one in the last article from the Kindeditor, and it looks like a clear glance.

How do you use it?

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

As in the previous article, you must keyup,mouseup the editor's Div to save the selection,range so that you can still insert the picture in its original position after losing focus. Direct Insertimage (HTML) is available when you call. Here is not the IFRAME, is the Div contenteditable=true.

The example inside the wangeditor is to insert a picture of an outer chain and only one picture at a time. Wangeditor source code is unified with the Document.execcommand ("Insertimage", false,html); But the problem with this approach is that in ie6,7,8, if you want to insert more than one picture, you just insert a picture in the original location.

Just comment out the IF

Insert two pictures at a time

This is a serious point, IE6.

Ie7

Ie8

The solution is if it is ie6,7,8, currentrange.pastehtml (HTML);. Insert HTML, which is to remove the if annotation above. Of course the insert is no longer the picture address, now is the entire IMG tag containing the image address

Ie6

Ie7

Ie8

The last attached example downloads

The above mentioned is the entire content of this article, I hope you can enjoy.