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. SQL数据库 CRUD

    1.删除表 drop  table +表名 2.修改表 alter  table+表名+ add(添加)+列名+ int(类型) alter  table+表名+ drop(删除)+column(列) ...

  2. centos6.5下Nginx的安装

    此处主要介绍通过配置Nginx的官方yum源,通过yum安装Nginx.参考官网:http://nginx.org/en/linux_packages.html 主要分为以下步骤: 1.配置yum源: ...

  3. Linux 比较重要且难掌握命令 集合

    1. find find path –option [-print] [-exec command] {} \; find . -maxdepth 1 -name aa find . -maxdept ...

  4. EXCEL VBA代码,实现点击Sheet1按钮控件保存不连续单元格的数据到Sheet2中,然后清空输入内容

    Private Sub SaveAndClear() Dim Header, Deatil, Order As Range Dim lastrow1, lastrow2 As Long Dim i A ...

  5. 编译包中的 Servlet

    编译包中的类与编译其他的类没有什么大的不同.最简单的方法是让您的 java 文件保留完全限定路径,如上面提到的类,将被保留在 com.myorg 中.您还需要在 CLASSPATH 中添加该目录. 假 ...

  6. MFC中调用chm帮助文档(使用相对路径)

    主要就一句话: ShellExecute(NULL,L"Open",path,NULL,NULL,SW_SHOWMAXIMIZED); 常用的显示方式是SW_SHOWNORMAL和 ...

  7. firefox(火狐)怎么关闭鼠标拖拽搜索

    工具-附加组件-卸载<附加组件管理器> 即可. 这玩意真心坑爹,起这个名字的人绝对是吃屎了,这名字怎么和鼠标拖拽混到一起的 !!!   关键字:火狐:鼠标:鼠标拖拽:鼠标手势:关闭

  8. Python成长之路(常用模块学习)

    Python 拥有很多很强大的模块 主要写一下常用的几个吧 大概就是这些内容了 模块介绍 time &datetime模块 random os sys shutil json & pi ...

  9. bin/mysqld: error while loading shared libraries: libnuma.so.1: 安装mysql

    如果安装mysql出现了以上的报错信息.这是却少numactl这个时候如果是Centos就yum -y install numactl就可以解决这个问题了. ubuntu的就sudo apt-get ...

  10. Convert.ToInt32(string '000000003') 变成了 3

    Convert.ToInt32(string '000000003') 变成了 3 但是在查询的时候需要用的是string 这里的convert.toint32 反而起了坏作用,不是所有的时候都要用c ...