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. 李洪强-HEAD 和nil和NULL

  2. AFNet3.0上传图片

    很多iOS应用都会遇到需要上传图片的情况,比如修改个人资料时需要上传自己的头像,最近我也遇到了这种情况,首先参考之前写过的AFNetWorking3.0处理请求头和请求内容. 我们在上述博客的基础之上 ...

  3. What is the difference between application server and web server?

    http://stackoverflow.com/questions/936197/what-is-the-difference-between-application-server-and-web- ...

  4. 基于 UML 的业务建模举例

    简介: 对于管理流程咨询项目.大型信息化建设项目和套装管理软件实施项目,对业务环境的分析和理解对项目的成功至关重要.系统.全面理解 IT 系统所处的业务环境,可以帮助 IT 系统能提供正确系统功能,并 ...

  5. chrono

    时间段的表示 tmplate<class Rep,class Period=ratio<1>> class duration; duration类被用来表示时间段的计量器,Re ...

  6. Eclipse 内置浏览器

    Web 浏览器 Eclipse 系统内部自带了浏览器,该浏览器可以通过点击 Window 菜单并选择 Show View > Other,在弹出来的对话框的搜索栏中输入 "browse ...

  7. Python Socket 网络编程 (服务器端编程)

    服务器端主要做以下工作: 打开 socket 绑定到特定的地址以及端口上 监听连接 建立连接 接收/发送数据 上面已经介绍了如何创建 socket 了,下面一步是绑定. 绑定 socket 函数 bi ...

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

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

  9. 针对中科院java接口的用法和问题

    1.下载附加的中科院分词工具包(要下载的到我的博客里面免费下载就可以) 2.解压后会看到例如以下几个目录 3.把java工程导入eclipse中.点击import.再选择existing projec ...

  10. 关于 JavaScript 学习 —— 好的博客或者网站推荐

    作者:Tw93链接:https://www.zhihu.com/question/19651401/answer/46211739来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...