精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
contentEditable是html中的一个属性。使用这个属性之后，我们可以直接对页面中的标签进行编辑。该属性的取值为布尔型，即"true"或"false"。设置html的contentEditable="true"时，说明开启了元素的编辑模式。如果设置contentEditable="false"时，就说明页面中的元素是不可编辑的。我们经常会用到的文本输入内容是input与textarea，使用contentEditable属性后，可以在div、table、p、span和body等等很多元素中输入内容。如果想要整个页面都是可编辑的，可以在body标签内设置contentEditable。使用了“contenteditable”属性，使div变成了textarea效果，还可以使文本框随着内容的多少来自适应高度。下面用个例子来介绍下：
contenteditable是HTML5的新属性，contentEditable已在html5标准中得到有效的支持。显示可编辑的文本的HTML代码如下:
<form id="form1" runat="server"> <div>
<br />
<div id="TextEdit" class="editable">
<div id="request" runat="server" contenteditable="true"></div>
<div id="requestInner" style="border-left:solid 1px gray; margin-left:10px; margin-right:10px;"
contenteditable="false" UNSELECTABLE="ON"><b>I am the inner div</b><br />with multple lines. You can check me on this.<hr />
This is the next line of text in <b>bold</b>, <i>Italic</i> and
<span style="text-decoration:underline">underlined</span>. Click here for more details <a target="_blank" href="http://www.articledean.com">Articledean.com</a></div>
</div>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="return onsaveclicked();" onclick="btnSave_Click" />
<br />
<textarea id="hrequest" runat="server" cols="50" rows="10" style="display:none;"></textarea> <br />
Server Response:<br />
Output in a Div (With out saving the format):<br />
<div style="border:solid 1px gray; width:300px; " id="response" runat="server"></div><br />
Output in a textbox (With the format):<br /><textarea id="txtoutput" runat="server" cols="50" rows="10"></textarea>
</div>
</form>
为了获取文本框内的文本(HTML)，我创建了一个父级div元素，id = "TextEdit”和应用样式表“editable”。
在父级div元素中，我添加了一个子元素，id =“request”并且设置属性“contenteditable = " true "，这使得div元素是可编辑的。
可编辑文本区域的下方，我添加了另一个div元素，id =“requestInner”并且设置“contenteditable = " false "，并显示富文本(HTML)。
要保存数据，一个隐藏多行文本框要添加到网页内，其中我们在HTML中定义的hrequest，我们给它的属性设置为“display:none;”就表示是隐藏的文本框，在保存数据中，也要返回隐藏文本的值到浏览器中。这个隐藏的文本框也要是服务器端控件，这样在ASP.NET的C#代码里才可以访问到它。
另外还要注意一点：OnClientClick和onclick的设置。OnClientClick是前端函数，在点击时它先执行；onclick是后台函数，它后执行。OnClientClick是在为onclick做准备，有了准备才好获取数据。这个OnClientClick非常妙，因为如果不知道的时候，想实现功能就很麻烦，以前我写过用blur事件来获取可编辑内容，就很麻烦。
一旦用户输入文本，点击保存，在表单提交之前，div中输入的文本被复制到隐藏的文本框中。这是JavaScript。
<script type="text/javascript">
function ReplaceTags(xStr) {
var regExp = /<\/?[^>]+>/gi;
xStr = xStr.replace(/<\/P>/gi, "\r\n");
xStr = xStr.replace(/<BR>/gi, "\r\n");
xStr = xStr.replace(/<P>/gi, "");
xStr = xStr.replace(regExp, "");
return xStr;
}
function onsaveclicked() {
var reqDiv = document.getElementById("<%=request.ClientID %>");
var hhrequestBox = document.getElementById("<%=hrequest.ClientID%>");
var responseText = ReplaceTags(reqDiv.innerHTML);
hhrequestBox.value = responseText;
return true;
}
</script>
这段代码有2个重要知识点：用<%%>获取服务器控件前台表示的ID和标签内容验证通过机制。
<%%>是服务器的标记 , 包含在< % %>中的表达式将服务器端的执行结果输出到客户浏览器 , 如：< % =test %>就是将变量test的值发送到客户浏览器中。<%=... %>还可以绑定服务器控件属性，如Label、TextBox，等等。
ClientID是由ASP.Net生成的服务器控件在客户端上标识符，表示由服务器端生成的客户端控件的ID，经常用于在客户端脚本中访问服务器控件所呈现的 HTML 元素。一般情况下与服务器端的ID相同，有时，不能为控件生成唯一的名称。比如在母板中，网页中的ID名会不相同。
以上代码中<%=request.ClientID %> 表明request是在服务端运行，在客户端前台部分，它的id不一定是request，所以要用<%=request.ClientID %>获取客户端Id的字符串。
<%=request.ClientID %>这么写的好处就是，如果你用的是母板，你再看你内容页所有控件的ID都不是原来的你写的ID了，是在你定义的ID前面加了一串别的东西，如果你直接 getElementById("id")的话是取不到的。如果用clientid就是生成后的id，就可以正常获取。
如果你想知道为什么使用“ReplaceTags”方法，下面是答案。
由于内置的ASP.NET Web表单验证，它不允许任何文本框提交HTML标记。所以所有的标签都被替换了，除了“P”和“BR”。
在一个典型的文本框中，,每按一次“回车”键，它都是通过Windows系统的“\r\n"表示的。
在HTML5中，大部分显示文本内容的元素都支持“contenteditable”属性，这给页面中用户的交互体验带来了极大的方便。
protected void btnSave_Click(object sender, EventArgs e)
{
response.InnerHtml = hrequest.Value;
txtoutput.Value = hrequest.Value;
}
OnClientClick内已经把数据赋值给了隐藏的服务器端控件hrequest，这时候用它的值很有保障了。