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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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);});