在 grapesjs 中为自定义面板添加 `
GrapesJS 的自定义面板（Panel）内容以 HTML 字符串形式注入，不支持内联 JavaScript 执行上下文（如 onChange="onChangeFn()"），因为该字符串被作为纯 DOM 结构插入，而内联事件处理器依赖全局作用域中的函数声明，且易受沙箱、执行时机和作用域隔离影响——这也是你定义了 onChangeFn 却未触发的根本原因。
✅ 正确实践：使用 延迟事件绑定，确保 DOM 元素已挂载后再监听：
// 1. 创建带唯一 ID 的面板（关键：为 select 添加 id）
editor.Panels.addPanel({
id: 'myPanel',
content: '',
visible: true,
buttons: [],
});
// 2. 确保面板已渲染完成（推荐使用 setTimeout 或 MutationObserver）
// 方案一：简单可靠（适用于同步渲染场景）
setTimeout(() => {
const dropdown = document.getElementById('grapes-dropdown');
if (dropdown) {
dropdown.addEventListener('change', (e) => {
console.log('Selected value:', e.target.value);
// ✅ 在此处执行你的业务逻辑，例如更新组件属性、触发命令等
editor.runCommand('custom:handle-selection', { value: e.target.value });
});
}
}, 0);
// 方案二（更健壮）：监听面板容器变化（推荐用于复杂/异步 UI 场景）
const panelEl = editor.Panels.getPanel('myPanel').getEl();
const observer = new MutationObserver(() => {
const dropdown = panelEl.querySelector('#grapes-dropdown');
if (dropdown && !dropdown.hasAttribute('data-listener-bound')) {
dropdown.setAttribute('data-listener-bound', 'true');
dropdown.addEventListener('change', (e) => {
console.log('Dropdown changed to:', e.target.value);
// 可安全调用 editor 实例方法或更新模型
});
}
});
observer.observe(panelEl, { childList: true, subtree: true });⚠️ 注意事项：
- 不要依赖 onchange 内联写法——GrapesJS 不执行模板中的 JS 行为；
- 避免在 addPanel 同步调用后立即 getElementById，此时 DOM 可能尚未插入文档；
- 若面板被多次销毁/重建（如切换页面模式），建议在销毁前移除监听器，或使用事件委托 + 动态选择器；
- 如需与 GrapesJS 命令系统深度集成，可封装为自定义 Command（editor.Commands.add('custom:handle-selection', {...})），便于复用和测试。
通过上述方式，你不仅能稳定响应下拉选择变更，还能保持代码与 GrapesJS 生命周期良好协同，兼顾可维护性与扩展性。
