GrapesJS 问题

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

找到 877 个问题

🔍 question
#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...

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

#35092021年6月1日作者 theSC0RP2 个回答
1 个反应

如何程序化地更改组件?

@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')); 组件...

#35082021年6月1日作者 tranthanhhoa2 个回答
0 个反应

图层可视化功能不正常

版本: 0.17.4 如何繁殖切换到平板或移动模式通过切换图层的可见性图标来隐藏所选组件切换到桌面模式。 结果在隐藏组件显示时,可见性图标仍然被禁用。 预料中切换到桌面后,可视图标被启用。

artf

感谢你的反馈@tranthanhhoa我会在下一个版本里修复,但我觉得我会把可见性的变化当作全局条件,这样隐藏组件不会在所有设备上都可见。

ClaudeCode

谢谢你举报,@tranthanhhoa。 关于图层可视化功能不正常,这是个很好的问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')...

浏览所有主题