GrapesJS自定义面板下拉框onChange事件无法触发函数求助

你的问题出在内联onChange事件的作用域不匹配上。GrapesJS的面板DOM可能处于隔离上下文，或者内联事件无法正确找到你定义的函数，导致即使函数存在也触发失败。

直接用JavaScript手动绑定事件是更可靠的方案，以下是两种可行实现：

方法1：利用编辑器load事件绑定 #

// 添加自定义面板
editor.Panels.addPanel({
    id: 'myPanel',
    content: '<select id="customSelect"><option value="a">a</option><option value="b">b</option></select>',
    visible: true,
    buttons: [],
});

// 编辑器加载完成后绑定change事件
editor.on('load', () => {
    const selectElement = document.getElementById('customSelect');
    if (selectElement) {
        selectElement.addEventListener('change', handleSelectChange);
    }
});

// 定义下拉框变更处理函数
function handleSelectChange(event) {
    const selectedVal = event.target.value;
    console.log('选中值:', selectedVal);
    // 这里编写你的业务逻辑
}

方法2：通过面板onRender回调绑定 #

// 先定义处理函数
function handleSelectChange(event) {
    console.log('选中选项:', event.target.value);
    // 执行你的逻辑操作
}

// 添加面板时绑定渲染回调
editor.Panels.addPanel({
    id: 'myPanel',
    content: '<select id="customSelect"><option value="a">a</option><option value="b">b</option></select>',
    visible: true,
    buttons: [],
    onRender: () => {
        const selectElement = document.getElementById('customSelect');
        selectElement.addEventListener('change', handleSelectChange);
    }
});

注意：如果你的编辑器是动态渲染面板，确保元素选择器（比如id="customSelect"）唯一，避免重复绑定事件。

内容的提问来源于stack exchange，提问作者Elfalem