#35252021年6月9日作者 anlumo3 个回答
你想给GrapesJS添加什么？ CSS 属性 'float' 只适用于 'position： static;' 元素，而这恰好是默认设置。我只想在位置没有设置其他时显示浮球无线电选择器。 但是，如果我在属性定义中添加“require： ['static'];'，该设置只在我明确将位置设置为”静态“时显示，而当我保持默认状态（默认状态也是”静态“）时，设置不会显示。 最新版本有替代方案吗？[ ] 是的（描述替代方案）[X] 不 这是否与某个问题有关？[ ] 是的（请提供本期链接）[X] 不
artf
你好@anlumo，你有没有尝试用类似“要求：{ position： ['static'] }''来扩展浮点定义？
anlumo
![图片]（https://user-images.githubusercontent.com/644763/124964896-d494db80-e021-11eb-9b11-8741d07476bf.png） 是的。重新加载页面后似乎没问题，但切换位置后就停止工作，看起来就像截图里那样。 定义如下： “''js { 名称：“布局”， 开场：假， buildProps： ['position'， 'top'， 'bottom'， 'left'， 'right'， 'flo...
ClaudeCode
谢谢你举报，@anlumo。 关于FEAT：在样式管理器中允许要求默认设置的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件...
#35152021年6月4日作者 anlumo4 个回答
定义如下： https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/canvas/view/FrameView.js#L303-L306 总是附加在框架上。它包含选定元素的颜色定义（那个蓝色轮廓）。这个颜色不能更改，因为这里有个“！重要”。由于这附加在正文中，在标题中添加样式表也不会覆盖它，即使我在那里也用了“！important”。 在我的使用场景中，关键问题是我想打印用 Grapesjs 创建的文档，但打印出来的模板不应该包含选取大纲。我可以写“@media print { .gjs-selected { outlin...
artf
你好@anlumo你说得对，不幸的是，组件状态样式是在 iframe 内渲染的。我尝试通过引入[这个选项]（https://github.com/artf/grapesjs/blob/614fad12b729c382b2444ca8b5e584f1dafc063a/src/canvas/config/config.js#L38-L39）把它们放到户外，但这还不能支持多重选择。所以，目前唯一能正确处理它们的方法就是使用以下选项： “''js Grapesjs.init（{ /...
filipecheverrya
嗨，@mingxin-yang，我相信你必须遵循@artf说的同样规则。但使用相应的类 “''js Grapesjs.init（{ // ... canvasCss： ' .gjs-tools .gjs-badge { / 用于标签 / 背景色：红色; } .gjs-toolbar { / 用于工具栏 / 背景色：红色; } , }) ``
GoodPHP
发布了用于固定颜色的免费插件 边界： https://gjs.market/products/borders-color-around-selected-component
#35122021年6月2日作者 Palash-Mandal3 个回答
你好，@artf， 我正在尝试开发一个简单的横幅插件，包含标题、副标题和链接。每个元素都可以拖拽、可丢弃、高亮，但基于以下代码，某些部分代码无法正常工作。请帮帮我 ![图片]（https://user-images.githubusercontent.com/17553816/120482925-3cc32280-c3cf-11eb-8f55-d8ccb3124b3d.png） 只有横幅类 CSS 推送，但还有一个 CSS 部分全部不发布 ![图片]（https://user-images.githubusercontent.com/17553816/120482976-4c426b80-c3cf-11eb-816a-689cf7...
artf
在你的模型组件定义中，你用的是“content： config.template”，但应该是“components： config.template”
Palash-Mandal
你好，@artf， 我已经解决了，但组件出了问题。子组件 H2、H3 和 Link 负责推送所有其他组件。如果我丢掉一个列组件，那个子元素也会被推入去。我该如何限制冲突。 下面是我做的Codepen示例。 https://codepen.io/coderdesigners/full/XWMoNbZ 如果我掉一栏，下面会上升。这并不常见。默认情况下应该会有。 ![图片]（https://user-images.githubusercontent.com/17553816/12...
ClaudeCode
谢谢你举报，@Palash-曼达尔。 关于子元素不可拖拽、可丢弃可高亮的问题，非常好。还有所有未推送在样式部分的子元素的CSS，同时在插件中开发横幅组件。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'ch...
#35092021年6月1日作者 theSC0RP2 个回答
@artf，我一直在尝试在样式中使用 id 和类之间切换，所以我需要用程序方式更改 componentFirst 属性。但当我尝试更改配置时，行为没有变化。 即使在演示中也无法正常工作。 繁殖步骤：添加两个文本块给它们起同样的职业名称。在浏览器控制台中，使用 'editor.getConfig（）.selectorManager.componentFirst = false'给文字添加一些颜色。它只会被添加到选中的区块中 附言：我还尝试在更改配置后使用editor.refresh（），但没有任何变化。
artf
你必须在更改那个选项 'editor.trigger（'component：toggled'）' 后重新触发选择
ClaudeCode
谢谢你举报，@theSC0RP。 关于如何程序化更改组件？ 这个问题非常好。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件...
#34862021年5月26日作者 kuhelbeher2 个回答
你好，目前 grapesjs 内置了属性，比如边际、填充，允许用户逐一更改每个属性（margin-top、margin-bottom等）。 如果能同时更改所有这些属性会很不错。比如说，有个锁定按钮，启用后会同时更改所有属性，而不是一个一个。它可能看起来像这样： ![图片]（https://user-images.githubusercontent.com/37115006/119662534-2bf83700-be3a-11eb-83ff-09b7b63446d5.png） @artf有没有简单的方法可以用现有的 Grapesjs 工具实现，比如 StyleManager.addType 方法或类似的？
artf
是的，那会很酷，但遗憾的是，GrapesJS 还没有合适的 UI 模块，可以让用户通过重复使用其他组件轻松构建新的 UI 组件，所以 ['StyleManager.addType']（https://grapesjs.com/docs/api/style_manager.html#addtype） 是唯一的办法，但在这种情况下，所有元素的构建权就得你自己决定。
ClaudeCode
谢谢你举报，@kuhelbeher。 关于FEAT：能够将所有边距、填充等属性合并的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：...
#34852021年5月26日作者 ahmedderkaoui1 个回答
考虑一个简单的块： 拖到画布时，可以选择该组件，并可修改其设置。 现在，我正在这样做，在卡片上添加相同的输入： '$（someElement）.find（“.card”）.html（'<输入类型=“text”/>'）;' 输入输入成功添加，但表现不如之前。它无法被选中、拖拽或删除，因此无法修改设置和样式。 有没有办法在特定元素中注入方块？
ClaudeCode
谢谢你举报，@ahmedderkaoui。 关于元素以HTML形式注入到画布时，不作为组件表现的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.lo...
#34832021年5月25日作者 Palash-Mandal2 个回答
你好，@artf， 非常非常感谢之前的帮助。我还在开发领域比较新手。请帮我下面说 我需要一个模式，可以获取用户输入，比如块名、分类、HTML、CSS、JS，然后点击保存，把这些存储为新的块管理器。比如如何传递这些数据并存储为 dragabe 组件 我设置了调用模态和设置标题也包含内容的按钮，但编辑器未启动 图片 ![图片]（https://user-images.githubusercontent.com/17553816/119516278-424bb780-bd94-11eb-86db-812c6c405b1f.png） function buildCodeEditor（type） { var codeEditor = 编辑器...
ClaudeCode
谢谢你举报，@Palash-曼达尔。 关于*的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））;...
#34782021年5月25日作者 eyroooon1 个回答
有些 CSS 功能不正常，比如 .gjs-cv-canvas 也无法正常工作。 这是我在nextjs上grapejs页面的截图 ![图片]（https://user-images.githubusercontent.com/64449714/119433144-3c2fe980-bd48-11eb-8176-2beab6880396.png）
ClaudeCode
谢谢你举报，@eyroooon。 感谢你分享关于在nextjs上使用GrapeJS的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节，维护者可以更快地识别和优先排序修复。...
#34772021年5月24日作者 ahmedderkaoui2 个回答
默认情况下，当“init”不包含以下内容时，编辑器会以英文启动： 然而，当我尝试用 i18n 方法更改语言时：“setMessages”，如下所示： “编辑。I18n.setMessages（{ en： tr }）;' 这种情况发生：打开的标签页（比如默认加载时打开的样式管理器）不会被 i18n 更新。悬停面板标题不会更新。未加载的标签页（比如特性管理器）会被 i18n 更新（因为之前未加载）
ClaudeCode
谢谢你举报，@ahmedderkaoui。 感谢你分享关于setMessages（）不会更新i18n的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节，维护者可以更快地识...
#34762021年5月24日作者 krishnaeverestengineering3 个回答
<img width=“1172” alt=“截图 2021-05-24 下午6：55 23” src=“https://user-images.githubusercontent.com/55732888/119354444-b8cbb500-bcc1-11eb-8e67-27e020c879aa.png”> 我在编写单元测试时遇到过这个错误，我正在测试编辑器实例的定义。随机测试用例通过，但大多数时候我遇到的是这个错误。
YyueeiWY
看起来你缺少了类名或父元素ID。 下面是使用 querySelector 的示例。 <pre> var parentElement = document.getElementById（'deviceready'）; var listeningElement = parentElement.querySelector（'.listening'）; console.log（listeningElement）; <div id=“deviceready”> <d...
artf
抱歉，这可能取决于太多因素（比如环境），与核心本身无关。
ClaudeCode
谢谢你举报，@krishnaeverestengineering。 TypeError： Cannot read properties 'querySelector' of null 的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试...