Selepas editor wangEditor hilang fokus, ia masih boleh memasukkan analisis imej pada kemahiran position

Selepas editor wangEditor hilang fokus, ia masih boleh memasukkan analisis imej pada kemahiran position_javascript asal

WBOY

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

asal

2034 orang telah melayarinya

Saya menjumpai editor teks kaya yang bagus wangEditor di github semalam. Nama itu ditulis oleh orang Cina. Nasib baik, editor ini menyokong IE6, dan perkara yang paling penting ialah ia masih boleh memasukkan gambar pada kedudukan asal selepas kehilangan fokus pada IE6, 7, dan 8, dan jumlah kod adalah sangat kecil. Jadi saya sangat ingin tahu bagaimana ia dibuat, dan memotongnya sedikit, itu sahaja

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

Salin selepas log masuk

Ini jauh lebih kecil daripada pakej yang diambil daripada kindeditor dalam artikel sebelumnya , dan ia kelihatan jelas sekali imbas.

Cara menggunakannya

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

Salin selepas log masuk

Sama seperti dalam artikel sebelum ini, keyup dan mouseup binding mesti dilakukan pada div editor untuk menyimpan pemilihan dan julat supaya imej masih boleh disisipkan pada kedudukan asal selepas kehilangan fokus. Hanya masukkanImage(html) terus semasa membuat panggilan. Apa yang digunakan di sini bukanlah iframe, tetapi div contenteditable=true.

Contoh dalam wangEditor ialah memasukkan gambar pautan luaran, dan hanya satu gambar boleh dimasukkan pada satu masa. Kod sumber wangEditor menggunakan document.execCommand("insertImage", false,html);. Tetapi terdapat masalah dengan kaedah ini, iaitu, dalam IE6, 7, dan 8, jika anda ingin memasukkan beberapa gambar, hanya satu gambar akan dimasukkan pada kedudukan asal.

Ulas jika dahulu

Sisipkan dua gambar pada satu masa

Lebih berhati-hati kali ini, iaitu6

iaitu7

iaitu8

Penyelesaian adalah jika ia adalah ie6,7,8, currentRange.pasteHTML(html);. Sisipkan html, iaitu, keluarkan komen if di atas Sudah tentu, yang disisipkan bukan lagi alamat imej, tetapi kini keseluruhan tag img

mengandungi alamat imej.

iaitu6

iaitu7

iaitu8

Contoh dilampirkan pada penghujung

Muat turun

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.