Content Editable

概述

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

浏览器兼容性

现如今,只要版本号超过如下所示的主流桌面浏览器都可以使用Content editable特性.

  • Firefox 3.5+
  • Chrome 6.0+
  • Internet Explorer 6.0+
  • Safari 3.2+
  • Opera 8+

但除了Firefox Mobile以外,其他的手机浏览器都不支持该特性.它们有:iOS Safari, Opera Mini, Opera Mobile, Android Browser.

它是如何工作的?

只要将HTML元素的contenteditable 属性值设置 true, 几乎所有的元素都可以激活编辑模式.

例子

1. 下面是一个简单的例子

<!DOCTYPE html>
<html>
  <body>
    <div contenteditable="true">
      This text can be edited by the user.
    </div>
  </body>
</html> 

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

相关链接

如何与网页内容进行交互  (IE风格API)

在mozilla浏览器中进行富文本编辑

Document Tags and Contributors

Contributors to this page: ziyunfei, ethertank, sunnylost
最后编辑者: sunnylost,