问题 #1904💬 已回答提出于 2019年3月19日作者 sakshigarg91 个反应

找零财产浮动

快速解答作者 prashant20181

你可以用传递给我的“模型”作为参数来获得当前属性。检查模型对象后,我发现可以用 model.attributes.style 获取样式 你应该通过以下方式修改代码片段来获得想要的输出: ' editor.on('component:styleUpdate:float', (model) => { console.log('style update', model.attributes.style); });`

阅读下方完整回答 ↓

问题

我正在尝试通过事件监听“float”属性的变化,判断它是在Style Manager中被移到了“左”、“右”还是“无”,但我的代码似乎没有给出想要的结果。

  editor.on('component:styleUpdate:float', (model) =>
  { console.log('风格更新',编辑。StyleManager.getProperty('General','float'));});

它给出的是“style update null”作为输出。理想的输出是float:right、float:left或float:none

回答(3)

prashant20182019年3月23日

你可以用传递给我的“模型”作为参数来获得当前属性。检查模型对象后,我发现可以用 model.attributes.style 获取样式

你应该通过以下方式修改代码片段来获得想要的输出: ' editor.on('component:styleUpdate:float', (model) => { console.log('style update', model.attributes.style);
});`

prashant20182019年3月24日

@sakshigarg9 我上面提到的方法对某些组件不起作用,更准确地说,我观察到的是,style属性会在定义类的组件上给出空字符串。 你用编辑器的方法是正确的,也适用于所有组件,只是你用了错误的扇区ID“General”而不是“general”。另外,你需要用以下方法提取浮点数值 编辑器。StyleManager.getProperty('general','float').attributes.value 下面的代码片段适用于我测试的 grapesjs-preset-网页中的所有组件。我觉得这也应该适用于你的实现:

lock[bot]2020年3月27日

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

相关问答

通过相似的问题讨论继续研究。

问题 #701

在编辑器中修改组件会清除模型内容

我想实现的目标: 我在编辑器中拉入的一些组件上有特殊的“data-”属性。当其中一个被修改时,我想获取“data-”属性的值和新内容。我有代码监听组件被修改。当这个事件触发时,我正在查看内容(正在进行中)。然而,当我拿到内容时,它是空的,尽管组件本身并没有...... 问题似乎...

3 个回答更新于 2019年9月18日

问题 #710

让整个元素都能拖动,而不仅仅是手柄

我正在修改手柄,除了有手柄外,我还希望整个元素都能拖拽。看代码,我猜我只需要在select时给可拖拽的元素附加'tlb-move'命令。 上述代码在选择状态下,将选中的组件写入控制台。从这里开始,我认为需要添加一个用于拖拽的事件监听器,但我尝试用 '.on()' 附加监听器都失...

3 个回答更新于 2019年11月7日

问题 #2000

:当组件的ID被更改时触发了什么事件?

我想在设置面板中组件的ID被更改时触发一些行为。我尝试过用 'editor.on()' 处理以下事件:“Component:update:id”'component:update:Id''Component:update:{id}''component:update:{Id}'...

2 个回答更新于 2020年5月6日

问题 #1386

组件有“缩放事件”吗?

我想读取当元素触发调整大小时的调整大小事件。 我现在的代码是这样的, ' editor.on(“component:resize”, function(model) { console.log(“模型”,模型); });` 但是,它并没有起作用。 有没有什么办法可以这样做?

2 个回答更新于 2019年9月17日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。