1

The problem is the default select element in the html is not good so what I want is to implement select2 plugin for the select in the Style manager of the grapesjs. As you can see in the fiddle I have tried it and it works but the thing is if we change the value in select it is not firing the event [the style change is not applying].

Please check the fiddle and let me know the proper way to do it.

Jithin Raj P R
  • 6,667
  • 8
  • 38
  • 69

1 Answers1

2

It is probable that select2 removes events attached to select element therefore you can't see the changes. However, you can programmatically set grapejs to change the style or device. See the example in this fiddle: https://jsfiddle.net/fd2z5qsa/.

Here is the relevant part:

$('.gjs-devices').on('select2:select', function (e) {
  editor.setDevice(e.params.data.id);
});


$('#gjs-clm-states').on('select2:select', function (e) {
 selectorManager.setState(e.params.data.id);
});```
Kalimah
  • 11,217
  • 11
  • 43
  • 80
  • Nice solution but what will be don with other `select` as per your answer we will have to rite an event for all `select` elements and there are some `select` in which there is no `ID` so that will also be an issue right. – Jithin Raj P R Jun 16 '20 at 11:49
  • I guess that would be a problem if you want to change an entire library select element. For other elements you might want to check the `e.params.data` and see if there are other ways to set the value. – Kalimah Jun 16 '20 at 11:51
  • ok, don't take this wrong, I am a beginner in `grapesjs` for other style values what will be the editor function.? like styles.?? – Jithin Raj P R Jun 16 '20 at 11:59
  • @weBBer that's OK. Overwriting a function in an entire framework is a big job. For example, I had to go through `grapesjs` documentation to find which function sets the device and which function update the style. Also, I had to find `e.params.data.id`. In other words you have to have a thorough knowledge of the API to find the related functions, and that is time consuming. In your fiddle I saw only two select elements, so I am not sure what other functions you are looking for. – Kalimah Jun 16 '20 at 12:02
  • when you click on an element you can see some style dropdowns in the right panel I was talking about them, is there any function sets their values. I was checking if there is a function that affects all style attributes. – Jithin Raj P R Jun 16 '20 at 12:55
  • I included that in my answer. This is the one `selectorManager.setState` – Kalimah Jun 16 '20 at 12:59