源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

  • 时间:2022-08-26 12:08 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
昨天在github上发现了一个很好的富文本编辑器[url=https://github.com/wangfupeng1988/wangEditor]wangEditor[/url],一看名字就是中国人写的。这个编辑器好在支持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();
    }
  }
这可比[url=http://www.cnblogs.com/TheViper/p/4217305.html]上一篇[/url]里面的那个从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进行keyup,mouseup绑定,以便保存selection,range,方便在失去焦点后仍然可以在原来位置插入图片。调用的时候直接insertImage(html)就可以了。这里用的不是iframe,是div contenteditable=true. wangEditor里面的例子是插入外链图片,一次只能插入一张图片。wangEditor源码统一用的是document.execCommand("insertImage", false,html);。但是这个方法有个问题,就是在ie6,7,8中,如果要插入多张图片的话,只会在原来位置插入一张图片。 先把if注释掉 [img]http://files.jb51.net/file_images/article/201505/2015050609264829.png[/img] 一次插入两张图片 [img]http://files.jb51.net/file_images/article/201505/2015050609264830.png[/img] 这次严谨点,ie6 [img]http://files.jb51.net/file_images/article/201505/2015050609264931.gif[/img] ie7 [img]http://files.jb51.net/file_images/article/201505/2015050609264932.gif[/img] ie8 [img]http://files.jb51.net/file_images/article/201505/2015050609264933.gif[/img] 解决方法是如果是ie6,7,8的话,currentRange.pasteHTML(html); 。插入html,也就是把上面的if注释去掉.当然插入的不再是图片地址了,现在是包含图片地址的整个img标签 ie6 [img]http://files.jb51.net/file_images/article/201505/2015050609264934.gif[/img] ie7 [img]http://files.jb51.net/file_images/article/201505/2015050609264935.gif[/img] ie8 [img]http://files.jb51.net/file_images/article/201505/2015050609264936.gif[/img] 最后附上例子[url=http://files.cnblogs.com/files/TheViper/my_editor1.zip]下载[/url] 以上所述就是本文的全部内容了,希望大家能够喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部