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 相关文章推荐
js中符号转意问题示例探讨
Aug 19 Javascript
js调用图片隐藏&显示实现代码
Sep 13 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
javascript中json基础知识详解
Jan 19 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
Vue常用指令详解分析
Aug 19 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
JavaScript代码调试方法实例小结
Jan 05 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读取目录下所有文件的代码
2008/01/07 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
py中的目录与文件判别代码
2008/07/16 Python
为python设置socket代理的方法
2015/01/14 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
《乞巧》教学反思
2014/02/27 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
创卫工作总结2015
2015/04/22 职场文书
销售人员管理制度
2015/08/06 职场文书
医学会议开幕词
2016/03/03 职场文书