在grapesjs样式管理器中集成select2或任何自定义选择插件

Posted 2023-05-09

【中文标题】在grapesjs样式管理器中集成select2或任何自定义选择插件

【英文标题】：Integrate select2 or any custom select plugin in grapesjs Style manager

【发布时间】：2020-10-01 02:25:23

【问题描述】：

问题是 html 中的默认 select 元素不好，所以我想要在 样式管理器 中为 select 实现 select2 插件的grapesjs。正如您在 fiddle 中看到的那样，我已经尝试过它并且它有效，但问题是如果我们更改 select 中的值，它不会触发事件 [样式更改是不适用].

请检查小提琴并告诉我正确的方法。

【参考方案1】：

select2 可能会删除附加到选择元素的事件，因此您看不到更改。但是，您可以通过编程方式设置grapejs 来更改样式或设备。请参阅此小提琴中的示例：https://jsfiddle.net/fd2z5qsa/。

以下是相关部分：

$('.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);
);```

【讨论】：

不错的解决方案，但是根据您的回答，其他select 将如何处理我们将不得不为所有select 元素举行一个事件，并且有一些select 没有@ 987654327@ 所以这也是一个问题。

我想如果您想更改整个库选择元素，那将是一个问题。对于其他元素，您可能需要检查 e.params.data 并查看是否有其他方法来设置值。

好的，不要误会，我是grapesjs的初学者，对于其他样式值，编辑器功能是什么？喜欢样式。？？

@webBer 没关系。在整个框架中覆盖一个函数是一项艰巨的工作。例如，我必须通过grapesjs 文档来查找哪个函数设置设备以及哪个函数更新样式。另外，我必须找到e.params.data.id。换句话说，你必须对 API 有透彻的了解才能找到相关的功能，这很耗时。在你的小提琴中，我只看到了两个选择元素，所以我不确定你在寻找什么其他功能。

当您单击一个元素时，您可以在右侧面板中看到一些样式下拉列表，我正在谈论它们，是否有任何函数设置它们的值。我正在检查是否有影响所有样式属性的函数。