TinyMCE 出于安全考虑会剥离内联事件（如 onclick）和脚本标签，因此直接在 HTML 内容中写 onclick="myFunction()" 无效；正确做法是通过编辑器事件监听 + 事件委托，在初始化后统一处理不可编辑区域中的用户交互。
tinymce 出于安全考虑会剥离内联事件（如 `onclick`）和脚本标签，因此直接在 html 内容中写 `onclick="myfunction()"` 无效；正确做法是通过编辑器事件监听 + 事件委托，在初始化后统一处理不可编辑区域中的用户交互。
在 TinyMCE 中实现不可编辑元素（如按钮、图标、提示区块）的 JavaScript 交互，绝不能依赖内联事件或动态注入 <script></script> 标签——这是编辑器主动过滤的安全机制。TinyMCE 会自动移除 onclick、onchange 等内联处理器，并忽略 <script></script> 内容，以防止 XSS 攻击和执行不受控代码。
✅ 正确方案：利用 editor.on('click') 事件 + 事件委托（Event Delegation）
以下是一个完整、健壮、生产可用的实现示例：
tinymce.init({
selector: '#tinymce',
height: 500,
content_style: `
body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; }
.myclass { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
.non-editable { border-color: red; }
`,
noneditable_class: 'non-editable',
setup: (editor) => {
// ✅ 在编辑器就绪后绑定点击事件监听（推荐使用 setup 回调）
editor.on('click', (e) => {
const target = e.target;
// 检查是否点击了 .non-editable 区域内的 button
if (target.matches('.non-editable button') ||
target.closest('.non-editable button')) {
// 阻止默认行为（如表单提交、跳转等）
e.preventDefault();
// 执行自定义逻辑（此处为 console.log，可替换为 API 调用、弹窗、状态更新等）
console.log('Hello world');
// ✨ 进阶：获取按钮数据属性，支持多类型操作
const action = target.dataset.action || 'default';
console.log(`Triggered action: ${action}`);
}
});
// ? 可选：同时监听键盘交互（如回车/空格触发按钮）
editor.on('keydown', (e) => {
const target = e.target;
if ((e.key === 'Enter' || e.key === ' ') &&
(target.matches('.non-editable button') ||
target.closest('.non-editable button'))) {
e.preventDefault();
console.log('Hello world (via keyboard)');
}
});
}
});
// 全局函数（无需在内容中重复声明）
function myFunction() {
console.log('Hello world');
}? 关键要点说明：
立即学习“Java免费学习笔记（深入）”；
-
noneditable_class: 'non-editable'必须与 HTML 中的 class 名严格一致，TinyMCE 才会识别该区域为只读容器（内部自动设置contenteditable="false"并禁用编辑行为）； -
所有交互逻辑必须在
setup或init后通过editor.on()绑定，而非写入 HTML 内容中； - 使用
target.matches()或target.closest()实现精准选择器匹配，兼容嵌套结构（如<button></button>在<div class="non-editable"> 内部任意深度）；<li>建议添加 <code>e.preventDefault()避免意外行为（尤其当按钮位于<form></form>或含href="#"时）； - 若需区分多个按钮行为，推荐使用
data-action、data-id等自定义属性传递上下文，而非硬编码函数名； - ⚠️ 注意：不要在
BeforeSetContent或SetContent钩子中尝试重写onclick属性——TinyMCE 会在渲染阶段再次清洗 DOM。 - 对不可编辑区域添加
tabindex="0"和 ARIA 属性（如role="button"），确保键盘可访问性； - 在 CSS 中为
.non-editable button:focus添加视觉焦点样式； - 若涉及异步操作（如调用 API），请妥善处理 loading 状态与错误反馈，避免阻塞编辑器主线程。
? 补充建议（提升体验与可维护性）：
通过该模式，你既能保障安全性与兼容性，又能灵活扩展交互能力——无论是插入预设文本、打开模态框、调用后端接口，还是联动 Vue/React 状态，均可在此事件体系中统一实现。
