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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
jquery预加载图片的方法
May 27 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 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
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
潜说js对象和数组
2011/05/25 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
如何基于Python批量下载音乐
2019/11/11 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
五型班组建设方案
2014/02/10 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
融资合作协议书范本
2014/10/17 职场文书
销售工作决心书
2015/02/04 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
离职证明格式样本
2015/06/12 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
Golang jwt身份认证
2022/04/20 Golang