After the wangEditor editor loses focus, it can still insert image analysis at the original position

After the wangEditor editor loses focus, it can still insert image analysis at the original position_javascript skills

WBOY

Release： 2016-05-16 16:00:44

Original

2034 people have browsed it

I found a good rich text editor wangEditor on github yesterday. The name is written by a Chinese person. Fortunately, this editor supports IE6, and the most important point is that it can still insert pictures at the original position after losing focus on IE6, 7, and 8, and the amount of code is very small. So I was very curious to see how it was made, and cut it a bit, that’s all

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

Copy after login

This is much smaller than the package taken from kindeditor 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();
  });

Copy after login

Same as in the previous article, keyup and mouseup binding must be performed on the div of the editor in order to save the selection and range so that the image can still be inserted at the original position after losing focus. Just insertImage(html) directly when calling. What is used here is not an iframe, but a div contenteditable=true.

The example in wangEditor is to insert external link pictures, and only one picture can be inserted at a time. The source code of wangEditor uses document.execCommand("insertImage", false,html);. But there is a problem with this method, that is, in IE6, 7, and 8, if you want to insert multiple pictures, only one picture will be inserted at the original position.

Comment out the if first

Insert two pictures at a time

Be more careful this time, ie6

ie7

ie8

The solution is if it is ie6,7,8, currentRange.pasteHTML(html);. Insert html, that is, remove the if comment above. Of course, what is inserted is no longer the image address, but now the entire img tag

containing the image address.

ie6

ie7

ie8

An example is attached at the end

Download

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