富文本编辑器实现方式

187 阅读1分钟

1.contenteditable='true'可以使普通的html标签,变为可编辑的文本框


###### contenteditable的值有多种 contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"
###### contenteditable="plaintext-only"和contenteditable="true"在输入框中换行输入文本的区别 后者获取html()内容含有div标签,前者只能输入文本,不包含html标签
<strong>contenteditable="plaintext-only"</strong>
<div class="test" id="containter" contenteditable="plaintext-only">离开水电费裂开是
两棵树独立思考lklskdf
了康师傅都流口水

</div>

<strong>contenteditable="true"</strong>
<div class="test" contenteditable="true">阿萨德<div>了开始的疯狂</div><div><br></div></div>

test.png

2. user-modify样式属性,可以使普通的标签可输入文本内容

user-modify值如下:

user-modify: read-only; //只读
user-modify: read-write;//支持富文本和contenteditable="true"效果一样
user-modify: write-only;//浏览器支持目前不支持
user-modify: read-write-plaintext-only; //支持纯文本输入

弊端:只支持webkit内核的浏览器:-webkit-user-modify: read-write/read-write-plaintext-only