GrapesJS 问题

已收录 3,464 个 GitHub 问题 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

找到 3,464 个问题

#35282021年6月10日作者 krishnaeverestengineering2 个回答
0 个反应

我没能对 Grapesjs 组件进行单元测试

不太清楚具体情况,但这就是我得到的。有时测试通过,有时随机失败。请帮帮@artf <img width=“1474” alt=“截图 2021-06-10 晚上7:08 14”,src=“https://user-images.githubusercontent.com/55732888/121535085-71faf080-ca1f-11eb-8e07-aeedf9ab7464.png”>

artf

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

ClaudeCode

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

#35272021年6月10日作者 alpha2k-io4 个回答
0 个反应

完成任务:发布完整演示代码

能不能从开始时发布完整的演示代码? 有许多相互依赖的小片段。 如果能把这些分开放在仓库里,开发者可以看到预期的最终结果,那会很好。 很多情况下,有些简单的事情被跳过了,或者片段的位置不对......比如CSS顺序。 这是一个强大的编辑器,但需要非常陡峭的学习曲线来定制以满足需求。 谢谢, AJ

anlumo

是的,问题在于演示版自己定义了一个插件,然后导入所有其他插件。这让学习操作变得非常困难,因为你必须在不同仓库中多次跟随重定向。这也不是你基于葡萄酱写申请的方式。 主演示插件的链接也不像演示页面那么容易找到,是[这里](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时,如何运行那个文件或配置文件?你能指点一下如何让它像演示中展示的那样运行吗?

#35262021年6月10日作者 iabhiyaan1 个回答
0 个反应

问题:如何在 Vuex 商店内正确初始化 Grapesjs?

“''js 从 './dist/grapes.min.js' 导入葡萄 const state = { 编辑:Grapesjs.init({ 背景设定 }) } ``` 这会触发错误:最大呼叫堆栈大小已超过。

ClaudeCode

谢谢你举报,@iabhiyaan。 问题:如何在vuex商店内正确初始化葡萄?似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别...

#35252021年6月9日作者 anlumo3 个回答
0 个反应

优点:在样式管理器中,允许要求默认设置

你想给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:*”事件...

#35242021年6月8日作者 iteniel3 个回答
0 个反应

:将select2 UI元素集成到特质中

我刚接触葡萄JS......很棒的工具。我有一些关于特质的问题。 我按照这个教程操作了 https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type 因为我必须覆盖href的生成方式。这个例子对我来说很棒,只需稍作修改。我想替换...... <select multiple=“multiple”> <option value=“option”></option> ....... </select> ![Selection_208](https://user-images.githubusercontent.com/25899228/121146044-d65...

artf

你可以这样做: “''js tagListElement.on('select2:select', e => this.onChange(e));onChange 会正确触发 onEvent ```

iteniel

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

ClaudeCode

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

#35152021年6月4日作者 anlumo4 个回答
9 个反应

Gjs 选择的风格是硬编码的

定义如下: 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

#35132021年6月3日作者 sizhousama3 个回答
0 个反应

:如何让自定义块始终出现在页面底部

如何让自定义方块始终出现在页面底部?

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技巧,或者你可以通过自定义组件定义一个带有固定容器的结构(例如一个用于标题、正体和页脚)

ClaudeCode

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

#35122021年6月2日作者 Palash-Mandal3 个回答
1 个反应

子元素不可拖拽,可丢弃,可高亮显示。还有所有未推送在样式部分的子元素的CSS,同时在插件中开发横幅组件

你好,@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...

#35112021年6月2日作者 moises-flowize2 个回答
0 个反应

命令 core:component-enter 在所有情况下都无法正常工作

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本: 0.16.44 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗?[ ] 是的[X] 不 预期的行为是什么? 使...

artf

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

ClaudeCode

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

#35102021年6月2日作者 iabhiyaan2 个回答
0 个反应

在某些事件后重新渲染特征(比如点击)

点击按钮后如何重新渲染属性?注意:重新渲染不应该是主导修改。 我创建了一个函数,通过调用 'createInput()' 中的 'render()' 来渲染 trait 有没有办法用更新后的dom字符串重新渲染这些特征,这个字符串最初是在'createInput()'上创建的?

artf

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

ClaudeCode

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

浏览所有主题