javascript基础从小白到高手系列八百八十：通过表单提交富文本

因为富文本编辑是在内嵌窗格中或通过为元素指定contenteditable 属性实现的，而不是在表单
控件中实现，所以富文本编辑器技术上与表单没有关系。这意味着要把富文本编辑的结果提交给服务器，
必须手工提取HTML 并自己提交。通常的解决方案是在表单中添加一个隐藏字段，使用内嵌窗格或
contenteditable 元素的HTML 更新它的值。在表单提交之前，从内嵌窗格或contenteditable 元素中提取出HTML 并插入隐藏字段中。例如，以下代码在使用内嵌窗格实现富文本编辑时，可以用在
表单的onsubmit 事件处理程序中：
form.addEventListener(“submit”, (event) => {
let target = event.target;
target.elements[“comments”].value =
frames[“richedit”].document.body.innerHTML;
});
这里，代码使用文档主体的innerHTML 属性取得了内嵌窗格的HTML，然后将其插入名为"comments"
的表单字段中。这样做可以确保在提交表单之前给表单字段赋值。如果使用submit()方法手工提交表单，
那么要注意在提交前先执行上述操作。对于contenteditable 元素，执行这一操作的代码是类似的：
form.addEventListener(“submit”, (event) => {
let target = event.target;
target.elements[“comments”].value =
document.getElementById(“richedit”).innerHTML;
});
小结
尽管HTML 和Web 应用自诞生以来已经发生了天翻地覆的变化，但Web 表单几乎从来没有变过。
JavaScript 可以增加现有的表单字段以提供新功能或增强易用性。为此，表单字段也暴露了属性、方法
和事件供JavaScript 使用。以下是本章介绍的一些概念。
 可以使用标准或非标准的方法全部或部分选择文本框中的文本。
 所有浏览器都采用了Firefox 操作文本选区的方式，使其成为真正的标准。
 可以通过监听键盘事件并检测要插入的字符来控制文本框接受或不接受某些字符。
所有浏览器都支持剪贴板相关的事件，包括copy、cut 和paste。剪贴板事件在不同浏览器中的
实现有很大差异。
在文本框只限某些字符时，可以利用剪贴板事件屏幕粘贴事件。
选择框也是经常使用JavaScript 来控制的一种表单控件。借助DOM，操作选择框比以前方便了很多。
使用标准的DOM技术，可以为选择框添加或移除选项，也可以将选项从一个选择框移动到另一个选择
框，或者重排选项。
富文本编辑通常以使用包含空白HTML 文档的内嵌窗格来处理。通过将文档的designMode 属性设
置为"on"，可以让整个页面变成编辑区，就像文字处理软件一样。另外，给元素添加contenteditable
属性也可以将元素转换为可编辑区。默认情况下，可以切换文本的粗体、斜体样式，也可以使用剪贴板功
能。JavaScript 通过execCommand()方法可以执行一些富文本编辑功能，通过queryCommandEnabled()、
queryCommandState()和queryCommandValue()方法则可以获取有关文本选区的信息。由于富文本编
辑区不涉及表单字段，因此要将富文本内容提交到服务器，必须把HTML 从iframe 或contenteditable
元素中复制到一个表单字段。