应监听input事件配合blur事件处理contenteditable元素内容变化，第三方编辑器则使用其专属事件如froala的contentchanged、tinymce的input、quill的text-change，兜底可用mutationobserver监听dom变动。
监听富文本编辑器内容变动，不能直接用原生 input 或 change 事件，因为富文本容器（如 div[contenteditable="true"] 或第三方编辑器）不触发标准表单事件。需根据使用场景选择对应方案。
使用 contenteditable 元素时监听内容变化
若自行实现或使用原生 contenteditable，推荐组合以下方式：
-
监听
input事件：现代浏览器对contenteditable元素支持该事件（包括输入、粘贴、删除、格式操作等），是最直接有效的方式 -
补充监听
blur：防止焦点外失未触发的边缘情况（如拖拽插入图片后未再输入） -
避免轮询
setInterval：性能差且不可靠，仅作兜底不推荐
示例：
请输入内容
const editor = document.getElementById('editor');<br>editor.addEventListener('input', () => {<br> console.log('内容已变：', editor.innerHTML);<br>});<br>editor.addEventListener('blur', () => {<br> console.log('编辑结束，最终内容：', editor.innerHTML);<br>});
使用 Froala、TinyMCE、Quill 等成熟编辑器
这类编辑器均提供专属内容变更事件，比监听 DOM 更稳定、语义更清晰：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
Froala：监听
contentChanged事件（在events配置中） -
TinyMCE：使用
editor.on('input', ...)或editor.on('NodeChange', ...) -
Quill：监听
text-change或selection-change事件
以 Froala 为例：
new FroalaEditor('#editor', {<br> events: {<br> contentChanged: function() {<br> console.log('富文本内容已更新');<br> // 可在此保存草稿、校验长度等<br> }<br> }<br>});
监听 HTML 结构级变动（通用兜底方案）
当无法控制编辑器内部逻辑（如嵌入第三方 iframe 编辑器），或需捕获任意 DOM 变更（如图片插入、表格生成），可用 MutationObserver：
- 观察目标元素的
childList和subtree - 过滤无关变更（如 class 切换、临时光标节点），只响应
innerHTML实质变化 - 注意防抖，避免高频触发影响性能
关键配置示例：
const observer = new MutationObserver(() => {<br> console.log('检测到编辑器 DOM 变化');<br> // 建议加防抖，并对比 innerHTML 或 textContent 是否真不同<br>});<br>observer.observe(editor, { childList: true, subtree: true });Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
