本文介绍如何通过文件选择、AJAX 上传与响应处理，在用户点击文件输入框的位置附近，将服务器返回的数据精准插入到 contenteditable 的 div 中，避免使用已废弃的 document.execCommand()，改用现代 DOM 操作实现安全、可控的动态内容注入。
本文介绍如何通过文件选择、ajax 上传与响应处理，在用户点击文件输入框的位置附近，将服务器返回的数据精准插入到 contenteditable 的 div 中，避免使用已废弃的 `document.execcommand()`，改用现代 dom 操作实现安全、可控的动态内容注入。
在实际开发中，常需实现在富文本编辑区域（如 <div contenteditable="true">）中动态插入结构化内容（如上传后生成的标签、预览链接或元数据）。原方案试图利用 document.execCommand("insertHTML") 在光标位置插入内容，但该方法不仅已被现代浏览器弃用，且绑定 click 事件监听器的方式无法准确捕获“点击前的光标位置”，导致插入位置不可控。
更可靠的做法是：放弃依赖光标定位的复杂逻辑，转而采用语义化、可预测的插入策略——例如，在编辑区末尾追加内容，或根据业务需求插入到指定容器节点内。以下是推荐的实现方案：
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
✅ 正确实现步骤（Vanilla JS + jQuery 混合）
<span class="file-wrapper"> <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) {
if (e.target.files.length === 0) return;
upload_file(e.target.files[0]);
});
function upload_file(file) {
const formData = new FormData();
formData.append("file", file); // 推荐上传 file 对象而非仅文件名，更实用
$.ajax({
url: "/api/upload", // 替换为真实接口
method: "POST",
data: formData,
processData: false,
contentType: false,
beforeSend: () => console.log("正在上传..."),
success: function (data) {
// 假设后端返回 { name: "report.pdf", url: "/uploads/report.pdf", id: 123 }
const span = document.createElement("span");
span.className = "span-added";
span.innerHTML = `<strong>✅ 已插入：</strong><a href="${data.url}" target="_blank">${data.name}</a>`;
const editor = document.querySelector(".div_edit");
editor.appendChild(span); // 插入到末尾（最稳定）
// ✅ 进阶：若需插入到光标处，可用 Range API（见下方说明）
// insertAtCaret(editor, span);
},
error: (xhr) => console.error("上传失败：", xhr.responseText)
});
}⚠️ 注意事项与最佳实践
- 不要拼接 HTML 字符串注入：原始代码中 '<span>' + data + '</span>' 存在 XSS 风险。应确保 data 是可信对象（如后端返回的结构化 JSON），并对 data.name 等字段做 HTML 转义（如使用 textContent 或 DOMPurify.sanitize()）；
- 避免 execCommand：该 API 已被 MDN 标记为废弃，且在 Chrome 98+、Firefox 87+ 中行为不一致或失效；
-
如需精确光标插入：可使用 Range 和 Selection API 获取当前光标位置并插入节点：
function insertAtCaret(container, node) { const selection = window.getSelection(); if (selection.rangeCount > 0) { const range = selection.getRangeAt(0); range.insertNode(node); range.collapse(false); // 光标置于插入内容之后 } else { container.appendChild(node); } } - 用户体验优化：上传期间可禁用文件输入框、显示 loading 提示；插入成功后可自动聚焦编辑区，便于继续输入。
综上，动态向 contenteditable 区域插入内容，核心在于用标准 DOM 方法替代过时命令，并以可控、安全、可维护的方式管理插入逻辑。从追加末尾起步，再按需扩展光标定位能力，是稳健落地的最佳路径。
