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

昨天在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注释掉

一次插入两张图片

这次严谨点，ie6

ie7

ie8

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

ie6

ie7

ie8

最后附上例子下载

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

赞 (0)

相关推荐

  • 文本框点击时文字消失，失去焦点时文字出现

    文本框点击时文字消失,失去焦点时文字出现 function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } var myinput = document.getElementById("myinput"); addListener(m

  • js 失去焦点时关闭层实现代码

    失去焦点时关闭层练习 #divUserName{ width:200px; height:30px; border:1px solid black; background:#cccccc; font-size:12px; margin-top:10px; } window.onload = function(){ document.getElementById("tbxUserName").focus(); document.getElementById("tbxUserNa

  • jquery获取焦点和失去焦点事件代码

    input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调用一下就OK 了 相关js代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&

  • 在js(jquery)中获得文本框焦点和失去焦点的方法

    先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号')

  • jquery-1.2.6得到焦点与失去焦点的写法

    jquery-1.2.6得到焦点与失去焦点的写法 $(function(){ $("input:text,input:password,textarea").focus(function(){$(this).css("background","#CBFE9F");}).blur(function(){$(this).css("background","#FFF");}); }); [Ctrl+A 全选 注:

  • 文本框获得焦点和失去焦点的判断代码

    文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 onpropertychange 当属性改变发生该事件 无论粘贴 keyup onchange等,最为敏感 先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id

  • textarea焦点的用法实现获取焦点清空失去焦点提示效果

    textarea焦点的用法实现获取焦点清空失去焦点提示效果

    效果图: 具体实现: 1.textarea标签内容 复制代码 代码如下: <span style="font-size:14px;"><tr> <td align="right" valign="top">备注:</td> <td><textarea name="" id="remark" cols="" rows=&qu

  • input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:  输入框获取焦点状态:  大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l

  • div失去焦点事件实现思路

    看本文得先了解以下几个事件(摘自w3c). blur事件: 当元素失去焦点时发生 blur 事件. focus事件:focus() 方法用于赋予文本域焦点(也值让某些元素得到焦点事件). tabIndex属性:tabIndex 属性可设置或返回按钮的 tab 键控制次序. 我们都知道blur只是针对form表单控件的,而对于 span , div , li 之类的,则没办法触发它们的动作,现在我们只需要设置一个tabindex属性则可以触发它们的焦点事件了. 真实项目代码: 复制代码 代码如下:

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

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

    昨天在github上发现了一个很好的富文本编辑器wangEditor,一看名字就是中国人写的.这个编辑器好在支持ie6+,另外最重要的一点,它在ie6,7,8上都可以做到失去焦点后仍然可以在原位置插入图片,而且代码量很少.于是很好奇的看看它是怎么做的,裁剪了一下,就这些 var currentRange,_parentElem,supportRange = typeof document.createRange === 'function'; function getCurrentRange()

  • JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法

    本文实例讲述了JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法.分享给大家供大家参考.具体如下: html代码: <form name="searchform" id="search-form"> <div> <b>Search</b> <input type="text" name="txtInput" title="Enter the t

  • jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后

    复制代码 代码如下: setFocus=function(id){ var t=$("#"+id).val(); $("#"+id).val("").focus().val(t); } 把焦点光标移动到id的文本最后. jquery获取焦点后光标在字符串后,当input获得焦点后,自动把光标移到文本内容的最后,jQuery用focus()使文本输入框获得焦点且焦点在文字的最右的方法 复制代码 代码如下: //获取焦点后光标在字符串后 //其原理就

  • Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil

  • spring 整合mybatis后用不上session缓存的原因分析

    因为一直用spring整合了mybatis,所以很少用到mybatis的session缓存. 习惯是本地缓存自己用map写或者引入第三方的本地缓存框架ehcache,Guava 所以提出来纠结下 实验下(spring整合mybatis略,网上一堆),先看看mybatis级别的session的缓存 放出打印sql语句 configuration.xml 加入 <settings> <!-- 打印查询语句 --> <setting name="logImpl"

  • JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

    本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法.分享给大家供大家参考,具体如下: <html> <iframe id="x" name="x"></iframe> <input type="button" onclick="t()" value="test"> <input type="button" onclick=

  • jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)

    最近在忙于jquery的前端开发,学习到很多知识,今天小编给大家带来一段代码片段有关弹出层后禁用滚动条的代码. 具体代码如下所示: $("cli-open").click(function(){ var scrollTop = document.body.scrollTop;//保存点击前滚动条的位置 window.onscroll=function(){ document.body.scrollTop = scrollTop;//赋值给滚动条的位置 } }) $(".cli

  • 文本框倒叙输入让输入框的焦点始终在最开始的位置

    文本框倒叙输入让输入框的焦点始终在最开始的位置

    所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置,如图所示,当我输入123456789时,在输入框上显示的是987654321. 为什么要做这个Demo?是因为在项目中遇到了,项目需求是两个输入框,一个正序输入,另一个倒叙输入. 下面我把实现的思路和代码写出来. 文本倒叙输入: 只要我们保证输入框的焦点始终在第一位,这样的话就可以实现每次我们输入的都在最前面,即倒叙 代码: function setPosition(ctrl, pos) { //设置光标位置函数 if (ctrl.setS

  • 解决vue项目刷新后,导航菜单高亮显示的位置不对问题

    1本人在学vue项目时遇到一个坑.在写vue项目头部导航时,比如点击第三个,刷新后,高亮状态显示在第一个: 现在是点击第三个页面 刷新后,是第一个页面高亮显示,但是因为路由路径没有改变页面内容还是第三个页面内容,改变的是导航的状态: 捯饬了好久才搞出来,伤的不轻,看控制导航状态的代码部分: 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0,触发点击事件contact时候会重新赋值,跳转路由,一旦刷新页面,这个checkindex的值就是0,所以要把这个checkindex值记

  • 点击提交按钮后DropDownList的值变为默认值实现分析

    在点击提交按钮后,页面上所有的绑定到数据库的控件值都恢复到默认值 原因是要将绑定函数loadData(),写在 if(!IsPostBack) { 你的绑定函数: } 否则,页面会重新加载,所有控件的值变为初始值. IsPostBack是Page类有一个bool类型的属性,用来判断针对当前页是正在为响应客户端回发而加载还是正在被首次加载和访问. 当IsPostBack＝true时表示为响应客户端回发而加载. 当IsPostBack＝false时表示正在被首次加载和访问. 也就是说只有当IsPos

随机推荐