html可编辑的段落
execCommand
document对象提供了一个execCommand方法，通过给这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对 document选中区域的操作 (如bold,italics等),也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进)。当元素被设置了contentEditable，通过执行execCommand 方法可以对当前活动元素进行很多操作。
document.execCommand()方法处理Html数据时常用语法格式如下:
document.execCommand(sCommand[,交互方式,动态参数])
示例
1、〖全选〗命令的实现 -将选种网页中的全部内容
document.execCommand(”selectAll”)
document.execCommand('styleWithCSS',null,true)
- 插入html
// 自定义 insertHTML 事件
_insertHTML: function (html) {
const editor = this.editor
const range = editor.selection.getRange()
if (this.queryCommandSupported('insertHTML')) {
// W3C
this._execCommand('insertHTML',html)
} else if (range.insertNode) {
// IE
range.deleteContents()
range.insertNode($(html)[0])
} else if (range.pasteHTML) {
// IE <= 10
range.pasteHTML(html)
}
},</code></pre>
getSelection
返回一个Selection对象，用于表示用户选择的文本范围或插入符的当前位置
const selection = window.getSelection() ;
如果想要将 selection 转换为字符串，可通过连接一个空字符串（""）或使用 String.toString() 方法。
Selection.removeAllRanges()
方法会从当前selection对象中移除所有的range对象,取消所有的选择只 留下anchorNode 和focusNode属性并将其设置为null。
Selection.addRange(range)
一个区域（Range）对象将被增加到选区（Selection）当中。
Range
创建
-
Range可以用 Document 对象的 createRange方法创建，
range = document.createRange();
- 也可以用Selection对象的getRangeAt方法取得
index指定需要被处理的子集编号（从零开始计数）。如果该数值被错误的赋予了大于或等于 rangeCount 结果的数字，将会产生错误。
range = sel.getRangeAt(index)
-
可以通过构造函数 Range() 来获得一个 Range
range = new Range()
range.setStart(startNode,startOffset) 设置 Range 的起点
var range = document.createRange();
var startNode = document.getElementsByTagName("p").item(2);
var startOffset = 0;
range.setStart(startNode,startOffset);
range.setEnd(endNode,endOffset)设置 Range 的终点
var range = document.createRange();
var endNode = document.getElementsByTagName("p").item(3);
var endOffset = endNode.childNodes.length;
range.setEnd(endNode,endOffset);
获取光标位置
Chrome用getBoundingClientRect
let rect = window.getSelection().getRangeAt(0).getBoundingClientRect();
1
Safari用getClientRect
let rect = window.getSelection().getRangeAt(0).getClientRects()[0];
原文链接：https://www.f2er.com/note/411508.html
