After the wangEditor loses focus, it can still insert the image analysis in the original position _ javascript skills

This article brings you a very good rich text editor, WangEditor. its biggest feature is that it can still insert images in the original position after losing focus on ie6, 7, and 8, in addition, the amount of code is very small. next we will analyze how it is implemented. Yesterday we found a good rich text editor wangEditor on github. The name is written by Chinese people. This editor supports ie6 +. The most important aspect is that ie6, 7, and 8 can still insert images in the original position after the focus is lost, and the amount of code is small. So I was curious to see how it was made. after cropping it, it would be like this.

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

This is much less than the kindeditor package in the previous article, and it looks clear at a glance.

How to 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 bind the p keyup and mouseup of the editor to save the selection and range, so that you can still insert images in the original position after the focus is lost. You can call insertImage (html) directly. Iframe is not used here, it is p contenteditable = true.

The example in wangEditor is to insert an external link Image. Only one image can be inserted at a time. The wangeditorsource code is document.exe cCommand ("insertImage", false, html );. But there is a problem with this method: in ie6, 7, 8, if you want to insert multiple images, only one image will be inserted in the original position.

Comment out if

Insert two images at a time

Rigorous this time, ie6

Ie7

Ie8

The solution is for ie6, currentRange. pasteHTML (html );. Insert html, that is, remove the above if Comment. of course, the inserted image address is no longer, but the entire img tag containing the image address.

Ie6

Ie7

Ie8

Attached example download

The above is all the content of this article. I hope you will like it.