wangEditor エディターがフォーカスを失った後も、元の位置に画像分析を挿入できます_javascript スキル

昨日、github で良いリッチ テキスト エディタ wangEditor を見つけました。名前は中国人によって書かれました。幸いなことに、このエディタは IE6 をサポートしており、最も重要な点は、IE6、7、および 8 でフォーカスを失った後も元の位置に画像を挿入でき、コード量が非常に少ないことです。作り方がとても気になったので、ちょっと切ってみました

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

これは、前の記事 で kindeditor から取得したパッケージよりもはるかに小さく、一目瞭然です。

使用方法

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

前の記事と同様に、フォーカスを失った後も画像を元の位置に挿入できるように、選択範囲と範囲を保存するには、エディターの div でキーアップとマウスアップのバインドを実行する必要があります。呼び出すときに直接 insertImage(html) するだけです。ここで使用されているのは iframe ではなく、div contenteditable=true です。

wangEditor の例は外部リンク画像を挿入するもので、一度に挿入できる画像は 1 つだけです。 wangEditor のソースコードは document.execCommand("insertImage", false,html); を使用しています。ただし、この方法には問題があり、IE6、7、8 では、複数の画像を挿入したい場合、元の位置に 1 つの画像しか挿入されません。

最初に if をコメントアウトします

一度に 2 枚の写真を挿入します

今回はさらに注意してください、ie6

ie7

ie8

ie6,7,8 の場合の解決策は、currentRange.pasteHTML(html); です。 HTML を挿入します。つまり、上記の if コメントを削除します。もちろん、挿入されるのは画像アドレスではなく、画像アドレスを含む img タグ

全体です。

ie6

ie7

ie8

サンプルは最後に添付されています

ダウンロード

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。