Method of triggering events: through custom GrapesJS panel

Question

I have a custom panel added to the GrapesJS editor. The panel has a drop-down menu of values. I want to trigger a function to run when the selected item in the dropdown menu changes. I tried the following:

editor.Panels.addPanel({
            id: 'myPanel',
            content: '<select onChange="onChangeFn"><option>a</option><option>b</option></select>',
            visible: true,
            buttons: [],
        });

If the function onChangeFn() is not defined, an error will occur when changing the selected item in the drop-down menu. However, when the function is defined, it doesn't run (and there are no errors).

I understand that if I use a button, I can configure the command property to execute the associated command. However, in this case, the panel needs to be a drop-down menu.

Answer 1

Finally I attached an event listener directly. That is, after assigning an id to the selected element (such as dropdownElement),

document.getElementById("dropdownElement").addEventListener('change', function(e) {console.log(e.target.value);});