html可编辑的段落

@H_301_6@
execCommand
document对象提供了一个execCommand方法，通过给这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对    document选中区域的操作 (如bold,italics等),也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进)。当元素被设置了contentEditable，通过执行execCommand 方法可以对当前活动元素进行很多操作。
document.execCommand()方法处理Html数据时常用语法格式如下:
document.execCommand(sCommand[,交互方式,动态参数])@H_301_6@
示例
1、〖全选〗命令的实现 -将选种网页中的全部内容
document.execCommand(”selectAll”)
document.execCommand('styleWithCSS',null,true)@H_301_6@
插入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>@H_<a href="https://www.jb51.cc/tag/301/" target="_blank" class="keywords">301</a>_6@
详细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();@H_301_6@

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

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

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

详细api:

range.setStart(startNode,startOffset) 设置 Range 的起点
var range = document.createRange();
var startNode = document.getElementsByTagName("p").item(2);
var startOffset = 0;
range.setStart(startNode,startOffset);@H_301_6@
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);@H_301_6@
获取光标位置
Chrome用getBoundingClientRect
let rect = window.getSelection().getRangeAt(0).getBoundingClientRect();

1

Safari用getClientRect
let rect = window.getSelection().getRangeAt(0).getClientRects()[0];

@H_301_6@
 原文链接：https://www.f2er.com/note/411508.html

      
[js]编辑器相关
      
                 

        
上一篇：【跃迁之路】【762天】每日增量知识下一篇：知识点总结