防止/禁用自定义块被丢弃在其他自定义块中
问题
你好,
我有一个自定义组件,我们称它为Section Block。我想防止用户在其他区块里丢弃分段块。这可能吗?
参考:https://grapesjs.com/docs/modules/Components.html#define-custom-component-type
我知道可以在新的组件类型上定义可拖拽的选项。我对这些选项的理解是包容的。
...
可拖拽:'form, form *', // 只能在'form'元素内丢弃
...
有没有办法让可拖拽的排他性,比如我说“这个方块可以丢弃在除[[组件类型]]以外的任何地方”?
回答(4)
你可以用 ':not()' 选择器,比如':not(.except-this-class)'
谢谢@artf。这个方案大致上奏效。现在我遇到了一个新问题,一些占位符文本消失了。 在我的模块内部的某些元素中,我会有一个带有文本节点的HTML元素,然后是另一个嵌套的HTML元素。例如,包含图标的链接标签。 当我在组件模型中添加可拖曳选项时,块内类似上述A标签的HTML元素会失去文本节点。如果我用类似span标签的方式包裹这些文本节点,文本会保留。不变的元素示例: 你知道有什么方法会导致文本节点出现在与其他元素一起的容器中时消失吗? 以下是我创建自定义组件的方式: 如果这个问题比较模糊,请见谅。我还在排查故障,非常困惑这个可拖拽配置选项怎么会影响组件的视图。你觉得我启动组件视图后会删除这些...
你用旧的API定义组件,这需要其他东西才能正常工作,这可能是问题的原因(我自己试过,一切正常)。请在这里查看正确的 API https://grapesjs.com/docs/modules/Components.html#define-custom-component-type
谢谢你举报,@stljeff1。 关于防止/禁用自定义方块被丢弃在其他自定义方块中的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期 editor.on('component:mount', (c) => console.log...
相关问答
通过相似的问题讨论继续研究。
问题 #3316
编辑器不会移除死稿块
版本: 0.16.34 你能重现演示中的bug吗? [ ] 是的 [x ] 不 据我了解,导入代码对话框跳过了所有HTML脚本,所以我无法在演示中重现这个问题 预期的行为是什么? 编辑者必须先移除失效脚本块,才能在生成的HTML末尾添加新的脚本块 详细描述那个漏洞* 我在项目中...
问题 #3688
如何自定义组件
我 https://grapesjs.com/docs/modules/Components.html#define-custom-component-type 读了这份文档,并尝试编写以下代码。我想让“mj-body”无法删除: 但我看不到效果,请帮帮我
问题 #5768
BlockProperties 中“content”属性的类型错误
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 不适用 描述一下那个虫子 GrapeJs 文档表明,可以在块的“content”属性中添加混合内容(见 https://grapesjs.com/docs/...
问题 #3574
添加特质不会被特质管理器识别。
以下是[docs](https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components)的示例。 有没有进一步的配置可以让元素的新特质显示? 使用输入的示例无法运行,我的ID被接收了,但额外的属性没有。...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor
Live WCAG 2.1/2.2 accessibility auditor + SEO manager for GrapesJS. Every finding is bound to the exact component — click to select, then one-click fix.
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How We Built Composeit in Record Time Using GrapesJS Shadcn
Bypass foundational builder boilerplate and focus on what truly matters.
浏览插件分类
直接跳转到市场上的插件分类页面。