[译]HTML进阶之HTML5 Content Editable

原文：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_Editable

概述

在HTML中，任何元素都可以编辑。通过使用一些JavaScript事件处理程序，您可以将您的网页转换成一个完整而快速的富文本编辑器。本文提供了有关此功能的一些信息。

在HTML5中,任何元素都是可编辑的. 这项特性在很久以前就已经被提出,不过直到现在才被WHATWG (当前HTML标准)组织标准化. 通过一些javascript事件处理函数,你可以把自己的网页转换成完整快速的富文本编辑器.

它是如何工作的?

只要将HTML元素的contenteditable属性值设置 true, 就可以激活编辑模式，那么该元素范围中的内容都是可编辑的.

例子

这是一个简单的例子，创建一个
元素，用户可以编辑其内容。


      This text can be edited by the user.

另一个使用LocalStorage技术配合的content editable例子演示

可执行命令

当一个HTML标签的contenteditable属性设置为true时，document.execCommand() 方法就生效了。这可以让你运行命令去操作可编辑区域的内容。大多数命令会影响选择的文档，例如，应用一个文本样式（粗体，斜体等等），或者当插入新标签时（例如添加一个链接），或者影响了一整行（例如文本缩进）。当使用contentEditable时，调用execCommand()方法将影响到当前的激活的可编辑元素。

标签生成的差异

一直以来，在不同的浏览器使用contenteditable效果不是很好，因为不同浏览器生成标签的规则不一样。例如，即使是像“输入即输出”来在一个可编辑标签内创建一个新行，在主流浏览器中都会有很多大不同。（Firefox插入
标签，IE/Opera插入

，Chrome和Safari插入

）

幸运的是，在现代浏览器中，插入标签是一致的。例如在Firefox 55中，将之前的
标签，改为

标签，与Chrome以及现代的Opera, Edge, and Safari一致。

在上面的例子中可以试一下。

提醒：老版本的IE，一直是在用
，没有更新成div。

如果你想使用段落分离器，上面提及的浏览器均支持document.execCommand，提供了一个"DefaultPragraphSeparator"接口，允许我们来改变默认插入的标签，例如，想用

来分段：
document.execCommand("DefaultParagraphSeparator", false, "p");

安全性

由于安全原因，Firefox不允许使用剪贴板的copy ，paste等等默认功能。你可以通过使用在firefox浏览器地址栏中输入about:config，从而去启用他们。
user_pref("capability.policy.policynames", "allowclipboard");
user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");

例子：一个简单但是完整的富文本编辑器




Rich Text Editor



































Lorem ipsum
 Show HTML




Note: if you want to see how to standardize the creation and the insertion

笔记：如果你想了解更多有关富文本编辑器的内容，可以查看 more complete rich-text editor example.

也可以看看

HTMLElement.contentEditable
contenteditable全局属性
Midas(脚本化的文本编辑组件)
caret-color 设置文本插入符号的颜色

期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：

SegmentFault技术圈:ES新规范语法糖

SegmentFault专栏：趁你还年轻，做个优秀的前端工程师

知乎专栏：趁你还年轻，做个优秀的前端工程师

Github博客: 趁你还年轻233的个人博客

前端开发QQ群：660634678

微信公众号：人兽鬼 / excellent_developers

努力成为优秀前端工程师！

[译]HTML进阶之HTML5 Content Editable

概述

它是如何工作的?

例子

可执行命令

标签生成的差异

安全性

你可能感兴趣的:([译]HTML进阶之HTML5 Content Editable)