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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
javascript自定义的addClass()方法
May 28 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
javascript实现确定和取消提示框效果
2015/07/10 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
新闻网站实习自我鉴定
2013/09/25 职场文书
代理班主任的自我评价
2014/02/04 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
计划生育标语
2014/06/23 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
MySQL中一条update语句是如何执行的
2022/03/16 MySQL