self. cmd.range.selectNodeContents(p[0])   建立选区
self.cmd.select()   选中选区

self.cmd.selection([forceRest])  根据当前选中状态重置range对象,forceRest默认值为false,值为true时如果当前没有选中信息,自动选择文档(body编辑区域最后节点之后)的最后位置

insertNode是在当前选区之前插入的

理解这个range关键都在红色的分界线
up 提高一个range

<p>
        <strong id="nstrong"><span>123</span>abc</strong>def

    </p>

        
var range = mainbody_editor.cmd.range;
      var len = doc.getElementById("nstrong").childNodes;  [span, text]

     var up = range.up();

offset就是从初始位置到分界线有多少个节点

12|345|6

红色的竖线是分界线,startoffset 位置前头有2个节点所以是2,endoffset前头有5个节点所以是5

 <strong id="nstrong">|<span>123</span>|abc</strong>def

startoffset就是0  endoffset就是1
 
选区部分 startContainer text   startoffset 0   endContainer text   endffset 3

startContainer的startoffset在开始处,endContainer的endffset在结尾处
up之后  就是找到container的container
选区部分 startContainer span    startoffset 0   endContainer strong   startoffset 2

enlarge之后就是p,相当于找到公共的父节点

在文本节点内部 up enlarge是不变的,对于选区是元素节点是变化的
123
 
setStartAfter 是在一个节点的结束位置之后 比如 text | 这个时候偏移量是1,因为前面只有一个text节点

select + range + insertNode+offset的更多相关文章

  1. web dom api中的Selection和Range

    如果你做过wysiwyg这样的app,一个很让人头疼的问题是如何保证执行bold,italic等格式化操作后保持先前鼠标所在的位置.要好好的解决这个问题,就必须将Selection和Range的api ...

  2. Excel VBA Range对象基本操作应用示例

    [示例01] 赋值给某单元格[示例01-01] Sub test1()Worksheets("Sheet1").Range("A5").Value = 22Ms ...

  3. [转]VB.net中 excel 的range方法

    本文转自:https://blog.csdn.net/bigheadsheep/article/details/7711235 第五章 Range对象基本操作应用示例(1)Range对象可能是VBA代 ...

  4. web前端学习(二)html学习笔记部分(3)--range对象

    1.2.8  html5编辑api之range对象(一) 1.2.8.1  Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...

  5. Notes: DOM Range

    通过DOM范围可以选择文档中的某个区域,而不需考虑节点的界限,例如文本高亮的处理就可以使用范围来实现. 1.Range的创建 使用document的createRange来创建一个范围,该方法返回一个 ...

  6. getSelection、range 对象属性,方法理解,解释

    网上转了一圈发现没有selection方面的解释,自己捣鼓下 以这段文字为例子.. <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火 ...

  7. HTML5中的Range对象的研究

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  8. HTML5 编辑 API 之 Range 对象(二)

    1.Range.cloneContents()The Range.cloneContents() returns a DocumentFragment copying the objects of t ...

  9. HTML5中的Range对象的研究(转载)

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

随机推荐

  1. Sphinx 安装与使用(1)-- 安装Coreseek

    Coreseek就是Sphinx的中文版 官方网站 http://www.coreseek.cn/ 一.安装 1.修改LANG 永久修改: vim /etc/locale.conf LANG=&quo ...

  2. [已解决]windows下python3.x与python2.7共存版本pip使用报错问题

    > 由于最近要更新插件,突然发现没法使用pip来安装升级插件,查了一圈才找到解决办法,特记录在此,便于其它人查询. 报错信息如下: Fatal error in launcher: Unable ...

  3. [PHP开发必备] 走在大牛的路上 phpstudy最全的开发环境搭建

    今天给大家分享我最喜欢的一个工具,也是咱php开发攻城狮亦或程序猿必备的开发神器 -- phpstudy最全的开发环境搭建 这也是我的好朋友,日复一日不断更新的成果,大家有钱的捧个钱场,没钱的捧个人场 ...

  4. Spring MVC多解析器映射

    如果想在spring mvc应用程序中使用多个视图解析器,那么可以使用order属性设置优先级顺序. 以下示例显示如何在Spring Web MVC框架中使用ResourceBundleViewRes ...

  5. 2015-2016ACM-ICPC NEER northern-subregional-contest C Concatenation

    可以在这里提交: http://codeforces.com/gym/100801 题目大意: 给出两个由小写字母组成的字符串S,T,从S中取一个非空前缀,从T中取一个非空后缀,拼接成一个新的字符串. ...

  6. staticmethod classmethod修饰符

    一.staticmethod(function) Return a static method for function.A static method does not receive an imp ...

  7. Spark OOM:java heap space,OOM:GC overhead limit exceeded解决方法

    问题描述: 在使用spark过程中,有时会因为数据增大,而出现下面两种错误: java.lang.OutOfMemoryError: Java heap space java.lang.OutOfMe ...

  8. 2205 Problem B

    问题 B: [高精度]简单高精度加法 时间限制: 1 Sec  内存限制: 64 MB 提交: 77  解决: 25 [提交][状态][讨论版] 题目描述 修罗王解决了计算机的内存限制问题,终于可以使 ...

  9. 辛星教你高速掌握PHP的正則表達式

    首先说一下,这篇文章也是我在看了数个大牛的博客之后总结出来的,因此首先向这些大牛表示崇高的敬意和感谢,因为人数众多.并且来源也是特别分散,就不一一介绍了,见谅. ************跨语言的主题* ...

  10. ionic + cordova 环境搭建

    1.安装nodejs:官网下载安装包,双击安装即可.成功后在控制台输入node -v 显示版本号即成功. 2.安装Java,配置环境变量,下载安卓sdk ,配置环境变量 ANDROID_HOME 为s ...