本文介绍如何通过文件选择、AJAX 上传及响应处理，在 contenteditable 的 div 中精准、安全地动态插入服务器返回的内容，避免使用已废弃的 document.execCommand()。
本文介绍如何通过文件选择、ajax 上传及响应处理，在 contenteditable 的 div 中精准、安全地动态插入服务器返回的内容，避免使用已废弃的 `document.execcommand()`。
在现代 Web 开发中，document.execCommand() 已被标记为废弃（deprecated），且行为在不同浏览器中不一致，不再推荐用于富文本编辑操作。正确做法是直接操作 DOM，结合可编辑容器（如 <div contenteditable="true">）的原生能力，实现可控、可维护的动态内容插入。
以下是完整、健壮的实现方案：
✅ 正确实现步骤
- 监听文件选择事件：使用 change 事件捕获用户选中的文件；
- 执行 AJAX 上传（模拟）：向服务端发送文件名（实际项目中建议使用 FormData 上传二进制文件）；
- 安全插入响应内容：获取服务器返回数据后，避免直接拼接 HTML 字符串（防止 XSS），推荐创建元素并设置 textContent 或谨慎使用 innerHTML（仅当数据可信时）；
- 插入位置控制：默认追加到可编辑区域末尾；若需插入到光标位置（如题中“点击按钮前的光标处”），需额外获取/恢复选区（见进阶说明）。
✅ 推荐代码实现（基础版 —— 追加到末尾）
<span> <input type="file" class="input-file" id="input-file"> 选择文件 </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) {
// 实际项目中建议用 FormData 上传文件本身，此处仅传文件名作示意
const formData = new FormData();
formData.append("file", file); // 或 formData.append("name", file.name);
$.ajax({
url: "/upload", // 替换为真实接口
method: "POST",
data: formData,
processData: false,
contentType: false,
beforeSend: function () {
console.log("正在上传...");
},
success: function (data) {
// ✅ 安全方式：创建元素并插入（推荐，防 XSS）
const span = document.createElement("span");
span.className = "span-added";
span.textContent = data.name || String(data); // 纯文本插入，绝对安全
// ✅ 或：若 data.content 是可信 HTML（如服务端已转义），可谨慎使用 innerHTML
// span.innerHTML = data.content || "";
const editableDiv = document.querySelector(".div_edit");
editableDiv.appendChild(span);
editableDiv.appendChild(document.createTextNode(" ")); // 可选：添加空格提升可读性
},
error: function (xhr, status, err) {
console.error("上传失败:", err);
alert("文件上传失败，请重试");
}
});
}⚠️ 注意事项与最佳实践
- 不要使用 execCommand：该 API 已被标准弃用，Chrome 98+、Firefox 无明确支持，Safari 行为不可靠；
- 防范 XSS 攻击：永远避免将未经校验的服务器响应直接拼入 innerHTML。优先使用 textContent 或 createElement + textContent；
- 光标位置插入（进阶需求）：若需精确插入到用户点击按钮前的光标位置，需在点击前保存选区（window.getSelection()），上传完成后恢复并插入节点——这需要额外封装 insertNodeAtCaret() 工具函数；
- 文件上传优化：示例中仅传递文件名，生产环境应使用 FormData 上传实际文件，并配合后端接收 multipart 数据；
- 用户体验增强：可添加 loading 状态、禁用按钮、错误提示等交互反馈。
✅ 总结
用原生 DOM 操作替代 execCommand 不仅更可靠、更易调试，也符合现代前端开发规范。核心原则是：信任数据来源 → 选择合适插入方式 → 保障安全性 → 提升用户体验。掌握这一模式，可轻松扩展为图片插入、模板占位符替换、实时协作编辑等高级场景。
