如果你做过wysiwyg这样的app,一个很让人头疼的问题是如何保证执行bold,italic等格式化操作后保持先前鼠标所在的位置.要好好的解决这个问题,就必须将Selection和Range的api搞搞清楚. https://javascript.info/selection-range Selection and Range js可以获得当前的选中区域信息,可以选择或者去选择部分或者全部内容,清楚document中的选中部分,使用一个心的tag来进行包裹等操作.所有这些操作的基石就是Selc…
1.2.8 html5编辑api之range对象(一) 1.2.8.1 Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <script> function rangeTest() { var html; showRangeDiv = document.getElementById("showRange"); selection…
一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = document.createRange(); 在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象: var selection =…
1.Range.cloneContents()The Range.cloneContents() returns a DocumentFragment copying the objects of type Node included in the Range. SyntaxdocumentFragment = range.cloneContents(); Examplerange = document.createRange();range.selectNode(document.getEle…
一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = document.createRange(); 在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象: var selection =…