[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];


                
                                
原文地址：https://www.jb51.cc/wenti/411508.html
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。