给HTML5的建议、HTML5的技巧和技术时讯联科｜时讯联科信息科技(3)_H5之家

如果你想让页面的某个地方，允许用户编辑页面，所有的你需要做的事就是添加属性到父容器中。你可能曾在 WYSIWYG 编辑器中看过。这个属性是 HTML5 的一部分，且它几乎被所有主流浏览器支持（Internet Explorer 5.5+, Firefox 3+, Safari 3.1+, Chrome 2+, and Opera 9.6+）：

值得注意的是设置 contenteditable=”true” 只是允许用户编辑、删除、插入内容，并不会自动提供其他类似于 WYSIWYG 编辑器的保存或应用样式的功能。你将需要自己用 Javascript 来添加这些功能。

简单示例代码: 有加粗、倾斜和下划线功能的基本编辑器 (View Demo)

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 ContentEditable Demo</title> <link href="html5reset.css" type="text/css" /> <link href="html5simple.css" type="text/css" />  <script language="javascript"> function editStyle(cmd) { document.execCommand(cmd, null, null); } </script> </head> <body> <header> <h1>HTML5 ContentEditable Demo</h1> </header> <div> <div> <a href="#">[Bold]</a> <a href="#">[Italic]</a> <a href="#">[Underline]</a> </div> <div contenteditable="true"> <h2>HTML5 Standardized Content Editing</h2> <p>Thanks to Microsoft; HTML elements are editable since Internet Explorer 5.5....</p> <p>To edit just start typing. To change style, select text and click on links in the tools bar.</p> </div> </div> </body> </html>

了解更多：

通向 HTML5 之路: contentEditable

如何利用 webkit 和 HTML创建一个桌面版的 WYSIWYG 编辑器

工具 & 资源列表：

拖放

HTML5 的拖放将会把与用户交互带向别一个等级，并将会对你如何设计用户交互产生重大影响。现今，Firefox 3.5+ 已经对此特性提供了最大化的支持，其他浏览还只是保守地支持了一小部分（Opera 完全不支持）。不幸的是根据现阶段浏览器提供商的执行状况，你将需要依赖大量的 Javascript 和 CSS 来让做跨浏览器支持。

注意：

简单代码示例: 将图片拖放到另一个窗口 (View Demo)

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Drag & Drop Demo</title> <link href="html5reset.css" type="text/css" /> <link href="html5simple.css" type="text/css" />  <script> function DragHandler(target, e) { e.dataTransfer.setData('Text', target.id); } function DropHandler(target, e) { var id = e.dataTransfer.getData('Text'); target.appendChild(document.getElementById(id)); e.preventDefault(); } </script> </head> <body> <header> <h1>HTML5 Drag & Drop Demo</h1> </header> <div> <div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false"> <img src="item-1.png" ondragstart="DragHandler(this, event)" alt="" /> <img src="item-2.png" ondragstart="DragHandler(this, event)" alt="" /> <img src="item-3.png" ondragstart="DragHandler(this, event)" alt="" /> <img src="item-4.png" ondragstart="DragHandler(this, event)" alt="" /> </div> <div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false"></div> <div>Drag and drop images from one container to another. Works in all major browsers except Opera.</div> </div>

了解更多:

JavaScript 解决方案：

HTML5 自带拖放 jQuery 插件

基于 Simple UI Kit 的拖放

稳健的数据存储

给HTML5的建议、HTML5的技巧和技术 时讯联科｜时讯联科信息科技(3)

给HTML5的建议、HTML5的技巧和技术时讯联科｜时讯联科信息科技(3)