应选用TinyMCE、Quill或CKEditor 5等富文本编辑器直接替换textarea，初始化时绑定DOM节点，通过getData()获取HTML并同步至hidden input，确保表单提交含格式数据。
怎么让 <textarea> 变成可加粗/插图/列的编辑区
直接替换掉原生 <textarea>，用富文本编辑器的实例接管其 DOM 位置和表单提交逻辑。别试图“增强”原生控件——它不支持内容样式、光标定位到 HTML 片段里，也拿不到富文本结构化数据。
实操建议：
- 选一个支持
onSubmit事件或提供getData()方法的编辑器（如TinyMCE、Quill、CKEditor 5），初始化时传入textarea的id或 DOM 节点 - 确保表单提交前调用编辑器的
getData()（或editor.getData()）把 HTML 写回隐藏的<input type="hidden">，而不是依赖<textarea>的值——多数编辑器会清空或禁用它 - 如果用
Quill，注意它默认不生成<textarea>值，必须手动同步：quill.on('text-change', () => { document.getElementById('hidden-content').value = quill.root.innerHTML; });
CKEditor 5 提交后拿到的是纯文本？
这是配置漏了 editor.config.plugins 里的 HtmlDataProcessor 或服务端没正确接收 text/html 类型字段。CKEditor 5 默认输出 HTML，但若后端只读 req.body.content 且前端没设好 name 属性或没同步值，就会丢格式。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 表单提交后
content字段是空的或只有换行符 - Chrome DevTools Network 标签里看到请求体中该字段缺失
- 编辑器界面上明明有加粗/链接，但打印
editor.getData()返回空字符串
检查点：
- 初始化时确认用了
ClassicEditor.create( ... )而非InlineEditor（后者不绑定表单） -
<textarea name="content">必须有name，且和 JS 中editor.getData()同步的目标字段名一致 - 若用 Express，确保
body-parser支持text/html：加extended: true并允许type: 'text/*'
为什么 Quill 在表单里提交后图片丢了
Quill 默认把图片转成 data:image/png;base64,... 写进 HTML，体积大、不安全、后端通常拒绝接收。这不是编辑器 bug，而是上传路径没接上。
使用场景：用户粘贴截图、点击插入图片按钮
必须做的三件事：
- 禁用默认图片插入：
toolbar: [['image']]配置下，需额外监听image按钮点击，自己弹文件选择框 - 图片上传必须走你自己的接口，拿到返回的 URL 后调用
quill.insertEmbed(range.index, 'image', uploadedUrl) - 服务端接收时，不能只解析 form-data 的 text 字段，要专门处理
file类型字段，并返回标准 JSON：{"url": "https://.../abc.jpg"}
否则 base64 图片会在提交时被后端截断、过滤，或触发 XSS 防御策略直接 400。
移动端 TinyMCE 输入法崩溃、光标错位
老版本 TinyMCE（v5.10 之前）在 iOS Safari 和部分安卓 WebView 里对中文输入法兼容差，表现为：打字卡顿、候选词消失、光标跳到开头、回车后内容重复。
性能与兼容性影响：
- 开启
inline: true模式在移动端几乎不可用，必须用textarea模式 - 禁用
spellchecker插件，它会高频触发 DOM 重排，加剧卡顿 - iOS 上务必设置
mobile: { theme: 'silver' }，否则默认主题渲染异常 - 不要在初始化时给
init_instance_callback里立刻调用setContent()，等onLoad事件后再设值
真正难处理的是输入法与 contenteditable 的底层冲突——没有银弹，只能靠降级：检测到 iOS 时，切回简单 <textarea> + Markdown 预览，别硬撑富文本。
