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. 【翻译自mos文章】在Oracle GoldenGate中循环使用ggserr.log的方法

    在OGG中循环使用ggserr.log的方法: 參考原文: OGG How Do I Recycle The "ggserr.log" File? (Doc ID 967932.1 ...

  2. 【精】cookie、 sessionStorage 、localStorage之间的异同

    1.cookie:存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密.一般应用最典型的案列就是判断注册用户是否 ...

  3. MySQL - 统计每个月生日的人数

    Person表定义如下: create table person(id int primary key auto_increment, birthday datetime); Person 数据如下: ...

  4. Sublime 正则 替换方法

  5. echarts(3.0)的基本使用(标签式导入)

    function loadRainFallCharts(msg) { var obj = {}; obj.x = []; obj.y = []; obj.line = []; var accumula ...

  6. 从 ie10浏览器下Symbol 未定义的问题 探索vue项目如何兼容ie低版本浏览器(ie9, ie10, ie 11 )

    问题:     vue项目在ie11下一片空白并报Symbol 未定义的错 原因:     ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将ECMAScr ...

  7. python3----ljust rjust center

    Python中打印字符串时可以调用ljust(左对齐),rjust(右对齐),center(中间对齐)来输出整齐美观的字符串,使用起来非常简单,包括使用第二个参数填充(默认为空格).看下面的例子就会明 ...

  8. jquery 插件 起步代码

    /** * Created by W.J.Chang on 2014/6/25. */ ;(function($) { var methods= { check: function() { retur ...

  9. 7、easyui 表单

    这是最后一个小节了,后面将会使用一个小项目来进一步实用讲解: 在之前的什么相关只是点都以及讲过了或者说涉及到过,如datagrid表格,树形菜单,布局面板panel,页签,拖放功能,只是在表格的属性细 ...

  10. 集成 SOLR 到 TOMCAT 中(傻瓜教程)

    按照如下配置,整个 Solr 是绿色版的,可以将 Tomcat 目录复制到任何一个地方运行 1.下载 solr 4.3 版本 2.下载 Tomcat 7 ( 6 也可以),另外可以根据系统下载 32 ...