[js]编辑器相关

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)

1. 插入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>
详细api 
getSelection
返回一个Selection对象，用于表示用户选择的文本范围或插入符的当前位置
const selection = window.getSelection() ;
如果想要将 selection 转换为字符串，可通过连接一个空字符串（""）或使用 String.toString() 方法。
Selection.removeAllRanges()
方法会从当前selection对象中移除所有的range对象,取消所有的选择只 留下anchorNode 和focusNode属性并将其设置为null。
Selection.addRange(range)
一个区域（Range）对象将被增加到选区（Selection）当中。
Range
Range表示包含节点和部分文本节点的文档片段。
api:
创建


Range可以用 Document 对象的 createRange方法创建，
 range = document.createRange();

也可以用Selection对象的getRangeAt方法取得

index指定需要被处理的子集编号（从零开始计数）。如果该数值被错误的赋予了大于或等于 rangeCount 结果的数字，将会产生错误。
range = sel.getRangeAt(index)

可以通过构造函数 Range() 来获得一个 Range
range = new Range()

详细api:
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];

                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!