摘要：已经从一个新的名词变成了我们在项目中经常用到的东西了，今天我们就来分析一番其中。在一个项目中有个多行文本的输入，感觉异常难以控制，所以尝试使用来模拟了一下。
HTML5已经从一个新的名词变成了我们在项目中经常用到的东西了，今天我们就来分析一番其中contenteditable 。
contenteditable是HTML5的一个新的特性，有可能你也了解过一些，但是因为你没在项目中遇到过，只知道contenteditable="true"可以触发可编辑，对于如何在项目中的应用？会出现什么问题呢？这些问题就是我们今天要说的。
先说说我遇到的。在一个项目中有个多行文本的输入，感觉textarea异常难以控制，所以尝试使用contenteditable="true"来模拟了一下。但是问题特别的严重，他们的编辑内容居然有css样式，每次都会发出去一些代码。然后就是复现问题，发现他们内容都是复制出来，然后他们常用的编辑器复制出来的内容，会带有css的表现为style标签。这样下来是不是感觉没有办法？然后紧急切换回textarea？通常这个事情都是这样结局的，但是我们的故事不能这样结局。
contenteditable="plaintext-only" 从单词上看来是纯文本，那么我们测试一下 http://jsrun.net/hcYKp
是不是特别的神奇呢？别急，css其实也是可以控制是否可以编辑-webkit-user-modify: read-write-plaintext-only，那么我们测试一下 http://jsrun.net/hcYKp
当然这么酷的东西，兼容还不是很好，测试最好是在chrome里面进行
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50997.html
摘要：已经从一个新的名词变成了我们在项目中经常用到的东西了，今天我们就来分析一番其中。在一个项目中有个多行文本的输入，感觉异常难以控制，所以尝试使用来模拟了一下。 HTML5已经从一个新的名词变成了我们在项目中经常用到的东西了，今天我们就来分析一番其中contenteditable 。 contenteditable是HTML5的一个新的特性，有可能你也了解过一些，但是因为你没在项目中遇到过...
摘要：总结最后介绍一下整个页面的功能可以对每个字段进行编辑可以对列表字段随意添加移动删除可以直接使用的语法来插入链接可以上传本地头图可以保存为三种格式在线预览地址戳我仓库戳我，欢迎 在线预览地址：戳我 GitHub仓库: 戳我，欢迎star 介绍 技术栈为纯React。接下来介绍一些稍微重要的技术点： contentEditable 核心的编辑功能用到了HTML5的 contentEdi...
阅读 3287·2021-10-11 10:58
阅读 2069·2021-10-08 10:05
阅读 1775·2021-09-27 13:34
阅读 3387·2019-08-30 15:53
阅读 2623·2019-08-30 14:02
阅读 3411·2019-08-29 16:55
阅读 526·2019-08-29 15:41
阅读 935·2019-08-29 15:23
