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. _T("") vs L 到底用谁?L!

    一直没有注意这个,今天突然纠结起来这个问题,代码写多了,难免这两个混用. 现在是时候有个结论了: 如果你的工程是unicode编译,那么请明确的使用L! 如果是多字节(ansi),那么请使用_T(&q ...

  2. python C example:encode mp3 code

    #include <stdio.h> #include <stdlib.h> #include <lame.h> #define INBUFSIZE 4096 #d ...

  3. JVM物理结构和在内存中的组织结构

    对于JVM自身的物理结构,我们可以从下图鸟瞰一下: JVM内存组成结构 JVM栈由堆.栈.本地方法栈.方法区等部分组成,结构图如下所示: 1)堆 所有通过new创建的对象的内存都在堆中分配,其大小可以 ...

  4. Git merge two repositories (ZZ)

    转自  https://stackoverflow.com/questions/2428137/how-to-rebase-one-git-repository-onto-another-one If ...

  5. Windows 7 SP1和Windows Server 2008 SP1的Event ID 10错误的解决方法

    安装了Windows 7 Service Pack 1 (SP1) 或 Windows Server 2008 R2 Service Pack 1 (SP1)都会遇到此错误提示. "Even ...

  6. php 字符串截取

    $str="3,22,11,444,33,1,3455,33,22,444,55,66,77,88,99,554336,"; echo substr($str,0,strlen($ ...

  7. spark 1.3 发布了

    悄悄地,spark 还是像往常一样,发布了1.3版本,从release notes可以看出,这一版本比较大的变化是1. 增加了DataFrame API,这样以后操作一些结构化的数据集时将会变的非常方 ...

  8. pip依赖安装与记录

    pip freeze requirements.txt是一个常常被许多Flask应用用于列出它所依赖的包的文本文件.它是通过pip freeze > requirements.txt生成的. 使 ...

  9. Servlet Session 跟踪

    HTTP 是一种"无状态"协议,这意味着每次客户端检索网页时,客户端打开一个单独的连接到 Web 服务器,服务器会自动不保留之前客户端请求的任何记录. 但是仍然有以下三种方式来维持 ...

  10. Java NIO(1):迟迟登场的NIO

    Java NIO的出现 Java语言发展至今,优点大家有目共睹:面向对象的语言.简洁有效.高移植性等等.但是同样也存在很多缺点,C语言程序员口中Java太慢了,.net程序员口中Java太开放了,ph ...