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


Posted in Javascript onMay 06, 2015

昨天在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进行keyup,mouseup绑定,以便保存selection,range,方便在失去焦点后仍然可以在原来位置插入图片。调用的时候直接insertImage(html)就可以了。这里用的不是iframe,是div contenteditable=true.

wangEditor里面的例子是插入外链图片,一次只能插入一张图片。wangEditor源码统一用的是document.execCommand("insertImage", false,html);。但是这个方法有个问题,就是在ie6,7,8中,如果要插入多张图片的话,只会在原来位置插入一张图片。

先把if注释掉

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

一次插入两张图片

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

这次严谨点,ie6

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

ie7

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

ie8

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

解决方法是如果是ie6,7,8的话,currentRange.pasteHTML(html); 。插入html,也就是把上面的if注释去掉.当然插入的不再是图片地址了,现在是包含图片地址的整个img标签

ie6

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

ie7

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

ie8

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

最后附上例子下载

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 继承详解(三)
Jul 13 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
小程序自定义弹框效果
Nov 16 Javascript
完美实现仿QQ空间评论回复特效
May 06 #Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 #Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 #Javascript
JS实现CheckBox复选框全选全不选功能
May 06 #Javascript
javascript使用avalon绑定实现checkbox全选
May 06 #Javascript
js实现滑动触屏事件监听的方法
May 05 #Javascript
JS根据生日算年龄的方法
May 05 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
python中如何设置代码自动提示
2020/07/15 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
《黄河颂》教学反思
2014/02/07 职场文书
优乐美广告词
2014/03/14 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
教师师德考核自我评价
2014/09/13 职场文书
2014年除四害工作总结
2014/12/06 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
java基础——多线程
2021/07/03 Java/Android