GrapesJS 问题

artf

和这里一样 https://github.com/artf/grapesjs/issues/3476#issuecomment-848074298

GJSBlock

谢谢你举报，@krishnaeverestengineering。 感谢你分享关于我没能对Grapesjs组件进行单元测试的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细...

anlumo

是的，问题在于演示版自己定义了插件，然后导入所有其他插件。这让学习操作变得非常困难，因为你必须在不同仓库之间执行大量重定向。这也不是基于 grapesjs编写应用的方式。 大师演示插件的链接也不像演示页面那么容易找到，是[这里]（https://github.com/artf/grapesjs-preset-webpage）。

artf

入门教程的最终代码实际上是[这里]（https://github.com/artf/grapesjs/blob/dev/docs/.vuepress/components/DemoTheme.vue）（及其 grapesjs [config]（https://github.com/artf/grapesjs/blob/8b423fdf093865a6bf55dc8285030ce99c111d6d/docs/.vuepress/components/demos/utils....

erpardeepjain

@artf，但当主文件在Vue，基础项目在React时，如何运行那个文件或配置文件？你能指点一下如何让它像演示中展示的那样运行吗？

GJSBlock

谢谢你举报，@iabhiyaan。 问题：如何在 Vuex 商店内正确初始化 grapesjs ？ 似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和 DOM 修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： 检查初始化顺序 — 确保组件在操作前已完全加载 使用编辑器的事件系统 — 收听完成事件： 推荐的下一步步骤： 如果还没测试，请用最新的 GrapesJS 版本测试 提供最小可重复的示例（CodeSandbox）...

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...

GJSBlock

谢谢你举报，@anlumo。 关于FEAT：在样式管理器中允许要求默认设置的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件...

artf

你可以这样做： “''js tagListElement.on（'select2：select'， e => this.onChange（e））;onChange 会正确触发 onEvent ```

iteniel

@artf谢谢 你能帮我回答问题的第一部分吗 我需要类似 onPostRender/afterRender 的工具，在 DOM 存在时初始化 select2 组件 createInput 方法之后的某个词

GJSBlock

谢谢你举报，@iteniel。 关于[问题]：将select2 UI元素集成到特质中的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something chang...

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

YyueeiWY

你需要显示的柔韧性 针对你的情况，在 End 的每个块对齐，在 Body 或 Parent 元素中使用 （align-content： flex-end; ） <pre> &lt;body class=“flex-container flex-end”&gt; &lt;div class=“flex-item”&gt;1&lt;/div&gt; &lt;div class=“flex-item”&gt;2&lt;/div&gt; &lt;div class=“flex-it...

artf

你好@sizhousama最简单的方法可能是某种CSS技巧，或者你可以通过自定义组件定义一个带有固定容器的结构（例如一个用于标题、正体和页脚）

GJSBlock

谢谢你举报，@sizhousama。 关于[问题]：如何让自定义块始终出现在页面底部，这是个很棒的问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'som...

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...

GJSBlock

谢谢你举报，@Palash-曼达尔。 关于子元素不可拖拽、可丢弃可高亮的问题，非常好。还有所有未推送在样式部分的子元素的CSS，同时在插件中开发横幅组件。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'ch...

artf

感谢@moises-flowize，这个问题将在下一个版本中修复 https://github.com/artf/grapesjs/commit/ac96298add119c4f4e000967ab3332f9ad711613

GJSBlock

谢谢你报告，@moises-flowize。 Command core：component-enter 在所有情况下都无法正常工作的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重...

artf

createInput只调用一次，如果你想更新属性的UI，可以依赖每次选择更改时调用的“onUpdate”。 附言：请避免使用“问题”提问，请查看讨论标签

GJSBlock

谢谢你举报，@iabhiyaan。 关于关于某些事件后（比如点击）后渲染特质的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something ch...