html实现富文本

参考利用 javascript 实现富文本编辑器 | 百度EUX

涉及知识点：

1-contenteditable

指定元素内容是否可编辑。

2-光标操作

控制光标的各种状态信息。分为selection对象和range对象

2-1selection对象

表示用户选择的文本范围或插入符号的当前位置。代表页面中文本选区

获得一个selection对象

let selection = window.getSelection()

获得用户选择的区域

let range = selection.getRangeAt(0)

2-2 range对象

包含节点和部分文本节点的文档片段。

其属性包括：

名称	用途
startContainer	range范围起始节点
endContainer	range范围结束节点
startOffset	range起点范围的偏移量
endOffset	range终点位置的偏移量
commonAncestorContainer	返回包含startContainer和endContainer最深的节点
collapsed	返回用于判断range起始位置和终止位置是否相同的布尔值