HTML表单实现富文本编辑的方法
在网页开发中，富文本编辑功能可以让用户在表单内输入带格式的文本，比如加粗、斜体、调整字体大小等，常见于内容发布、评论编辑等场景。HTML原生提供了实现富文本编辑的基础能力，结合JavaScript可以扩展出丰富的文本格式工具。
一、基础原理：contenteditable属性
HTML中实现富文本编辑的核心属性是contenteditable，该属性可以应用在任何HTML元素上，当设置为true时，元素内的内容就可以被用户编辑，并且支持保留文本的格式信息。
通常我们会将contenteditable属性应用在<div>或者自定义的内容区域元素上，而不是常规的<input>或<textarea>，因为后两者仅支持纯文本编辑，无法保留格式。
下面是一个最基础的富文本编辑区域示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基础富文本编辑</title>
</head>
<body>
<form>
<div class="rich-text-container">
<div id="editor" contenteditable="true" style="border:1px solid #ccc; min-height:200px; padding:10px;">
在这里输入带格式的文本，试试选中文本后按Ctrl+B加粗
</div>
<input type="hidden" id="richTextContent" name="richTextContent">
</div>
<button type="button" onclick="submitContent()">提交内容</button>
</form>
<script>
function submitContent() {
const editor = document.getElementById('editor');
const hiddenInput = document.getElementById('richTextContent');
// 将富文本区域的HTML内容存入隐藏输入框，随表单提交
hiddenInput.value = editor.innerHTML;
console.log('提交的富文本内容：', hiddenInput.value);
}
</script>
</body>
</html>上面的示例中，我们将可编辑区域的HTML内容通过JavaScript同步到隐藏的<input>元素中，这样表单提交时就能获取到完整的带格式文本内容。
二、添加文本格式工具
基础的contenteditable仅支持用户通过快捷键操作格式（比如Ctrl+B加粗），要提供更友好的交互，需要自定义格式工具按钮，通过document.execCommand方法（旧版标准，目前主流浏览器仍支持）或者现代Selection/Range API来操作选中文本的样式。
1. 使用document.execCommand实现格式工具
document.execCommand可以直接对当前选中的文本执行格式命令，比如加粗、斜体、添加下划线等，使用简单，适合快速实现基础格式功能。
常用命令列表：
bold：加粗选中文本
italic：将选中文本设置为斜体
underline：为选中文本添加下划线
fontSize：设置选中文本的字体大小，参数为1-7的数字
foreColor：设置选中文本的字体颜色，参数为颜色值
insertUnorderedList：为选中内容添加无序列表
下面是一个带基础格式工具的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>带格式工具的富文本编辑器</title>
</head>
<body>
<form id="richTextForm">
<!-- 格式工具栏 -->
<div class="toolbar" style="margin-bottom:10px;">
<button type="button" onclick="formatText('bold')">加粗</button>
<button type="button" onclick="formatText('italic')">斜体</button>
<button type="button" onclick="formatText('underline')">下划线</button>
<button type="button" onclick="formatText('insertUnorderedList')">无序列表</button>
<select onchange="formatText('fontSize', this.value); this.value=''">
<option value="">选择字号</option>
<option value="1">小</option>
<option value="3">中</option>
<option value="5">大</option>
<option value="7">特大</option>
</select>
<input type="color" onchange="formatText('foreColor', this.value); this.value='#000000'" title="选择字体颜色">
</div>
<!-- 富文本编辑区域 -->
<div id="editor" contenteditable="true" style="border:1px solid #ccc; min-height:200px; padding:10px;">
请在这里输入内容，选中文本后点击工具栏按钮设置格式
</div>
<!-- 隐藏输入框存储内容 -->
<input type="hidden" id="richTextContent" name="content">
<button type="button" onclick="submitForm()">提交表单</button>
</form>
<script>
// 执行文本格式命令
function formatText(command, value = null) {
// 确保编辑区域获得焦点，否则命令可能不生效
document.getElementById('editor').focus();
if (value) {
document.execCommand(command, false, value);
} else {
document.execCommand(command, false, null);
}
}
// 提交表单前同步内容
function submitForm() {
const editor = document.getElementById('editor');
const hiddenInput = document.getElementById('richTextContent');
hiddenInput.value = editor.innerHTML;
// 这里可以添加表单提交逻辑，或者手动提交表单
console.log('表单内容：', hiddenInput.value);
// document.getElementById('richTextForm').submit();
}
</script>
</body>
</html>2. 现代API实现（Selection/Range）
document.execCommand已经被W3C标记为废弃，虽然目前浏览器仍支持，但新开发的功能建议使用Selection和Range API实现，更灵活且符合未来标准。
Selection API可以获取用户选中的文本范围，Range API可以操作选中的具体DOM节点，通过这两个API可以自定义任何格式修改逻辑。下面是一个使用Selection/Range实现加粗功能的示例：
function boldTextBySelection() {
const selection = window.getSelection();
if (!selection.rangeCount) return;
const range = selection.getRangeAt(0);
// 如果选中的内容为空，不执行操作
if (range.collapsed) return;
const boldElement = document.createElement('strong');
// 将选中的内容包裹到<strong>标签中
range.surroundContents(boldElement);
// 清除选中状态
selection.removeAllRanges();
}这种方式需要自己处理各种边界情况，比如选中内容跨多个DOM节点时的处理，但可以自由扩展更多自定义格式能力。
三、注意事项
富文本区域的内容是HTML片段，提交到服务端后需要做XSS过滤，避免恶意脚本注入。
不同浏览器对
contenteditable和document.execCommand的实现可能存在细微差异，测试时需要覆盖主流浏览器。如果需要更复杂的功能（比如插入图片、表格、代码块），可以基于上述原理扩展，或者直接使用成熟的富文本编辑器库，比如访问https://www.ipipp.com查看相关开源库示例。
隐藏输入框存储的是HTML字符串，后端接收后如果需要提取纯文本，需要进行HTML标签过滤处理。
四、总结
HTML表单实现富文本编辑的核心是contenteditable属性，通过它可以让普通元素支持富文本编辑。添加格式工具可以通过document.execCommand快速实现基础功能，也可以通过Selection/Range API实现更定制化的能力。实际开发中可以根据需求复杂度选择实现方式，简单场景用原生方案即可，复杂场景建议使用成熟的第三方库提升开发效率。
富文本编辑器HTML表单contenteditabledocument.execCommandSelection API