美文网首页
编辑器涉及到不得不了解的概念

编辑器涉及到不得不了解的概念

作者: 恬甜咖啡糖_0301 | 来源:发表于2018-06-28 18:52 被阅读0次

    1、getSelection

    • 是当前激活选中区(即高亮文本);
    • 在非IE浏览器(Firefox、Safari、Chrome、Opera)下可以使用window.getSelection()获得selection对象,
    1.1、getSelection相关属性:anchorNode、baseNode、extentNode、focusNode

    有些比较老的浏览器可能没有baseNode和extentNode

    anchor
    选中区域的“起点”。
    focus
    选中区域的“结束点”。
    range
    是一种fragment(HTML片断),它包含了节点或文本节点的一部分。一般情况下,同一时刻页面中只可能有一个range,也有可能是多个range(使用Ctrl健进行多选,不过有的浏览器不允许,例如Chrome)。可以从selection中获得range对象,也可以使用document.createRange()方法获得。

    属性

    • anchorNode 返回包含“起点”的节点
    • anchorOffset “起点”在anchorNode中的偏移量
    • focusNode 返回包含“结束点”的节点。
    • focusOffset “结束点”在focusNode中的偏移量。
    • isCollapsed “起点”和“结束点”是否重合。
    • rangeCount
      返回selection中包含的range对象的数目,一般存在一个range,Ctrl健配合使用可以有多个,一般浏览器都是一个,唯独 firefox 可以多个

    通过实例来理解这几个属性吧

    0.png
    1.png
    2.png
    3.png
    4.png

    https://stackoverflow.com/questions/32227149/changing-caret-color-in-contenteditable-div

    相关文章

      网友评论

          本文标题:编辑器涉及到不得不了解的概念

          本文链接:https://www.haomeiwen.com/subject/bchnyftx.html