contenteditable,contenteditable 光标

contenteditable属性什么意思

如果需要样式，比如粗体或者下划线，或者需要插入图片，这时就需要用contenteditable。记得设置这个属性的时候，如果二次编辑的话，光标定位会有问题。

contenteditable怎么读

英文原文：

content editable

英式音标：

[k?n?tent] editable

美式音标：

[?kɑnt?nt] editable

contenteditable属性

contenteditable通俗来讲就是一个编辑器。

contenteditable 属性是 HTML5 中的新属性。规定是否可编辑元素的内容。

属性值

true 规定可以编辑元素内容。

false 规定无法编辑元素内容。

例：

很多人刚开始接触contenteditable这个属性时都会想到textarea。

textarea支持多行文本输入，满足了我们编辑的很大需求。然而，textarea不能像div一样高度自适应，高度保持不变，内容大于高度时就会出现滚动条。而且textarea只支持文本输入，随着现在越来越关注用户体验，需求也越来越多，很多时候我们需要在编辑区域插入图片，链接，视频。

现在我们有一个很简单的实现办法，就是让一个div标签（高度自适应block元素）模拟编辑器。即在div里加入contenteditable="true"属性；

例：

在设置了contenteditable属性的元素中插入图片，链接，商品等；

此处还涉及到一个window.getSelection知识点，在接下来的文章会详细介绍。

让contenteditable元素只能输入纯文本

（1）css控制法

一个div元素，要让其可编辑，contenteditable属性是最常用方法，CSS中也有属性可以让普通元素可读写。

user-modify.

支持属性值如下：

read-write和read-write-plaintext-only会让元素表现得像个文本域一样，可以focus以及输入内容

（2）contenteditable控制法

"plaintext-only"可以让编辑区域只能键入纯文本

* 注意：目前仅仅是Chrome浏览器支持比较好的

后续会继续更新。

欢迎反馈，感谢阅读！