本文介绍如何通过文件选择、AJAX 上传及响应处理，在用户点击文件输入框的位置附近，将服务器返回的数据精准插入到 contenteditable 的 div 中，避免使用已废弃的 document.execCommand()。
本文介绍如何通过文件选择、ajax 上传及响应处理，在用户点击文件输入框的位置附近，将服务器返回的数据精准插入到 contenteditable 的 div 中，避免使用已废弃的 `document.execcommand()`。
在现代 Web 开发中，contenteditable 元素常被用作轻量级富文本编辑器，但其动态内容插入需谨慎处理。原方案试图借助 document.execCommand("insertHTML") 在光标位置插入内容，但该 API 已被正式弃用（MDN 标记为 Deprecated），且无法可靠绑定到 <input type="file"> 的 click 事件上——因为文件选择框的点击与编辑区域焦点无直接关联，导致插入位置不可控。
更稳健的做法是：将新内容追加到可编辑 div 的末尾，或根据业务逻辑插入到指定位置（如光标所在处）。以下为推荐实现：
✅ 正确实现：使用原生 DOM 操作插入内容
<span> <input type="file" class="input-file" id="input-file"> <label for="input-file">选择文件</label> </span> <div contenteditable="true" class="div_edit" id="div_edit"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
$(document).on("change", ".input-file", function (e) {
upload_file(e.target);
});
function upload_file(inputElement) {
const file = inputElement.files[0];
if (!file) return;
const formData = new FormData();
formData.append("file", file); // 推荐上传文件本身，而非仅文件名
$.ajax({
url: "/upload", // 替换为实际接口
method: "POST",
data: formData,
processData: false,
contentType: false,
beforeSend: () => console.log("正在上传..."),
success: function (data) {
// 假设后端返回 { name: "report.pdf", previewUrl: "/preview/123" }
const resHtml = `<span class="span-added" data-file="${file.name}">
? ${data.name || file.name}
<a href="${data.previewUrl || '#'}" target="_blank">查看</a>
</span>`;
const editableDiv = document.querySelector("#div_edit");
// ✅ 方式1：追加到末尾（最简单、最稳定）
editableDiv.insertAdjacentHTML("beforeend", resHtml);
// ✅ 方式2（进阶）：插入到当前光标位置（需保存/恢复选区）
// insertAtCaret(editableDiv, resHtml);
},
error: (xhr) => console.error("上传失败:", xhr.responseText)
});
}⚠️ 注意事项与最佳实践
- 不要仅传文件名：仅发送 name 字段无法真正上传文件，应使用 FormData 提交二进制文件。
- 避免 innerHTML +=：它会重写整个 HTML，导致已有的事件监听器丢失、光标重置、格式错乱；推荐使用 insertAdjacentHTML() 或 appendChild()。
- 若需精确插入光标处：可借助 window.getSelection() 和 Range API 实现（需在 change 触发前记录焦点位置，或在 success 中主动聚焦并插入）。
- 安全性提醒：若 data.name 来自服务端且未经校验，务必对 HTML 内容做转义（如使用 textContent 创建元素），防止 XSS；示例中若需渲染 HTML，请确保数据可信或使用 DOMPurify 等库净化。
✅ 总结
放弃 document.execCommand()，拥抱标准 DOM 方法（如 insertAdjacentHTML、appendChild）是构建健壮可编辑区域的关键。结合 FormData 上传、语义化 HTML 插入与安全处理，即可实现清晰、可维护、符合现代规范的动态内容注入逻辑。
