本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.29节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
实例说明
在HTML 5 中，使用属性“contenteditable”可以直接编辑显示在页面中的文字，该属性的取值为布尔型“true”或“false”。如果在元素中将该属性的值设置为“true”，那么就可以对该元素显示的文本内容直接进行编辑了。
在本实例中，分别创建了两个< article >内容元素。第一个元素将“contenteditable”属性设置为“true”，用于直接内容的编辑；第二个< article >元素保存编辑后的内容。当用户编辑完成后，单击“保存”按钮，则将编辑后的内容显示在第二个< article >元素中。
具体实现
使用Dreamweaver创建一个名为“029.html”的文件，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>使用contenteditable属性</title> <link href="css.css" rel="stylesheet" type="text/css"> <script type="text/javascript" async="true"> function Btn_Click(){ var strArt=document.getElementById("art_0").innerHTML; var objArt=document.getElementById("art_1"); objArt.innerHTML='<b>编辑后：</b>'+strArt; } </script> </head> <body> <h5>编辑修改网页中文字</h5> <article contenteditable="true" class="p3_10" id="art_0"> 这是一段可以编辑修改的文字 </article> <article class="p3_10" id="art_1"> </article> <input type="button" value="保存" class="inputbtn" onClick="Btn_Click();"> </body> </html>在上述JavaScript代码中，自定义了一个在单击“保存”按钮时调用的函数Btn_Click()。在该函数中，为了获取编辑后的内容，先将修改完成的内容保存至变量“strArt”中，然后通过元素ID号获取用于显示结果的< article >元素，并将该元素显示的内容设置为变量“strArt”的值。执行后的初始效果如图1-49所示，修改这段文字，然后单击“保存”按钮后发现成功修改了这段文字，如图1-50所示。
https://yqfile.alicdn.com/f4d9f2080855685014e3e3255c3ed7db07e6f80b.png" >注意
在HTML 5中，大部分显示文本内容的元素都支持“contenteditable”属性，这给页面中用户的交互体验带来了极大的方便。到作者编写本书时为止，暂无相关的API对编辑后的内容进行直接保存；如果需要保存，只能借助于Ajax或JQuery中的异步操作来更新对应的后台数据。
相关资源：七夕情人节表白HTML源码(两款)