参考文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Global_attributes/contenteditable
定义：
contenteditable是一个全局枚举属性，用来决定html标签内部的内容是否可以编辑
<p contenteditable="true">Edit this content to add your own quote</p>属性值：
- true或空字符串，表示元素是可编辑的。没有设置该属性值的时候，被视为空字符串。
- false表示元素不是可编辑的。
- plaintext-only表示元素的原始文本是可编辑的，但富文本格式会被禁用。
如果没给出该属性或设置了无效的属性值，则其默认值继承自父元素：即，如果父元素可编辑，该子元素也可编辑。
caret扩展：
caret-color
css属性caret-color属性用来定义插入光标(caret)的颜色。就是当前文本获取焦点之后的那个小竖线。
p { caret-color:skyBlue }caret-animation:
光标动画（这个属性比较新，不是所有的浏览器都支持）：用来控制光标的闪烁动画。
/* Keyword values */ caret-animation: auto; //指定文本光标闪烁显示 caret-animation: manual;//指定文本光标不闪烁显示 /* Global values */ caret-animation: inherit; caret-animation: initial; caret-animation: revert; caret-animation: revert-layer; caret-animation: unset;目前我用的腾讯文档的类似就是：
p { caret-color:blue caret-animation: auto; }也可以自定义光标动画
@keyframes custom-caret-animation { from { caret-color: transparent; } to { caret-color: darkblue; } } p { animation: custom-caret-animation infinite linear alternate 0.75s; caret-color: darkblue; caret-animation: manual; }补充一下动画属性：
animation: custom-caret-animation infinite linear alternate 0.75s;相当于：
- animation-name: 使用名为custom-caret-animation的关键帧动画
- animation-duration:0.75s- 每次动画循环持续 0.75 秒
- animation-timing-function:linear- 动画速度均匀（匀速）
- animation-iteration-count:infinite- 无限循环播放
- animation-direction:alternate- 动画交替反向播放（去时正向，回时反向）
