本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.29节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
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所示。
注意
在HTML 5中，大部分显示文本内容的元素都支持“contenteditable”属性，这给页面中用户的交互体验带来了极大的方便。到作者编写本书时为止，暂无相关的API对编辑后的内容进行直接保存；如果需要保存，只能借助于Ajax或JQuery中的异步操作来更新对应的后台数据。
