GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#34102021年4月22日作者 sizhousama3 个回答
0 个反应

编辑奇怪的行为!

当我进入编辑器并使用 setComponents 或 addComponents 在商店中添加组件时,第一个元素的第一个类会莫名其妙地被添加到某个元素的类中。有人知道原因吗?我需要帮助!!! ![图片](https://user-images.githubusercontent.com/40018231/115696252-14d6ad00-a395-11eb-9bdd-c9a6ffd75627.png) ![图片](https://user-images.githubusercontent.com/40018231/115696564-667f3780-a395-11eb-9869-23d3802cb64b.png)

sizhousama

@artf

artf

那个课程是从你的应用里来的,所以可能有成千上万的原因,我们光看两张截图是帮不了你的。如果你认为有bug,按照模板正确打开问题,并创建一个可复现的演示。

ClaudeCode

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

#34092021年4月21日作者 ltenti-eventboost4 个回答
3 个反应

自定义组件属性,但不是特质

我想创建一个带有属性的自定义组件,该属性会被特定代码更新,但我不希望这个属性作为特性可见且可更新;假设我的属性叫“ebTesto”,我写了一个插件函数: 我本以为会在存储的 JSON 的“gjs-components”部分找到新属性,但结果是这样的: 也许我尝试的方式错了? 有人有过类似的需求吗? 谢谢你的帮助!

ltenti-eventboost

谢谢你们俩!

Ju99ernaut

我觉得它没有被存储,因为属性没有从默认状态更改。编辑器应能从组件定义中恢复该属性。

Ju99ernaut

试着把它加进“默认值”里

#34072021年4月21日作者 rattrayalex3 个回答
8 个反应

专长:CSS 网格

你想给GrapesJS添加什么? 增加对CSS Grid(“display: grid;”)及其各种选项的支持。 我个人没有立即需要,但我觉得应该被记录。

Ju99ernaut

这个插件有一个CSS网格布局工具 https://github.com/Ju99ernaut/grapesjs-plugin-toolbox https://user-images.githubusercontent.com/48953676/115495409-d98a9000-a267-11eb-923a-b6f86cbefc99.mp4

artf

@Ju99ernaut了不起的插件

ClaudeCode

谢谢你举报,@rattrayalex。 关于FEAT: CSS Grid的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行...

#34052021年4月20日作者 chrisijoyah4 个回答
0 个反应

专长:在块状物落入画布前,需要挂钩的事件

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么? 详细描述你的功能需求详细 目前有一个事件可以连接到“canvas:drop”,可以访问掉落的模型。在将方块放入画布之前,我想先...

artf

你好@chrisijoyah你试过用'canvas:dragdata'吗?这里举个用法示例 https://jsfiddle.net/artur_arseniev/87rcb24n/

chrisijoyah

你好@chrisijoyah你试过用“canvas:dragdata”吗?这里举个用法示例 https://jsfiddle.net/artur_arseniev/87rcb24n/ 这是否意味着我可以阻止丢失的模型被添加到画布中?理想情况下,我想做一些检查,确定拖曳后的方块是否可以被放入某个区域,如果通过检测,我想在添加之前阻止它被放入。有没有办法做到这一点?我能不能做类似“result.content='' 或者类似...... “''js editor.on('can...

artf

我能做类似result.content= ''的操作吗? 是的,你应该能用这个技巧做到这一点。你能多说说你的使用场景吗?你想做什么样的检查?

#34012021年4月12日作者 ahmedderkaoui3 个回答
10 个反应

样式管理器能总是生成 ID 而不是使用已经定义好的元素的类吗?

当我们在编辑器中为元素做样式时,如果该元素既没有类也没有ID,样式管理器会生成一个带有CSS样式的新ID。然而,用类样式化元素时,样式管理器会用该类添加样式。 有没有办法总是用ID来做样式,而不用类? (这有助于用户在具有相同类别属性的组件上创建不同的自定义样式)

Ju99ernaut

“''js window.editor = grapesjs.init({ // ... 选择经理:{ componentFirst: 1, } // ... }); ```

ahmedderkaoui

非常感谢!

ClaudeCode

谢谢你举报,@ahmedderkaoui。 关于样式管理器能否总是生成ID,而不是使用已定义的元素类?,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => con...

#33992021年4月9日作者 AdamTorma4 个回答
2 个反应

将 JSON 转换为服务器端的 HTML

首先,感谢@artf这个了不起的项目。 我有个问题: 在服务器端(Node.js环境)能否轻松地将组件的JSON转换为HTML?如果可能的话,能给我一些建议吗? 客户端方面很简单: 我可以获取components-JSON (“JSON.stringify(editor.getComponents();')”)并保存到我的数据库。之后我可以重复使用组件('editor.setComponents();'),并让 HTML ('editor.getHtml();') 在浏览器中显示。不过就我而言,我必须在服务器端完成。 任何帮助都将不胜感激!

bgrand-ch

你好, 对于未来的问题或技术问题(非漏洞),GitHub的[讨论](https://github.com/artf/grapesjs/discussions)标签是最佳选择。 如果问题已解决,请关闭,或在[讨论](https://github.com/artf/grapesjs/discussions)->[问答](https://github.com/artf/grapesjs/discussions/categories/q-a)类别写一条详细的新消息(并关闭本期)。...

anlumo

是的,如果你有任何互动内容,那可能行不通。幸运的是,我的申请情况并非如此。

Ju99ernaut

也许你可以在服务器端安装Grapesjs(类似客户端),用来渲染,否则你得逆向工程渲染器。另一种选择是将生成的HTML也存储在数据库中。

#33972021年4月9日作者 YumiChen1 个回答
0 个反应

分拣器方向与网页组件槽不符

版本:0.16.45 你能重现演示中的这个bug吗?[x] 是的[ ] 不 预期的行为是什么? 给定一个父网页组件实例渲染一些元素,在 shadowDOM 中,如果 'slot' 的父元素具有 'display: flex' 风格,排序器应是垂直的,因为结果中元素是水平对齐的。 目前的行为是什么? 分拣器会是水平的。 你能附上截图、截屏或实时演示吗?[x] 是(附上)[ ] 不 https://jsfiddle.net/72dyhu6L/ <img width=“741” alt=“截圖 2021-04-09 下午6 38 06” src=“https://user-images.githubusercontent.com/276...

ClaudeCode

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

#33962021年4月9日作者 YumiChen1 个回答
0 个反应

Flex-direction: column & float: left,使排序器方向错误

版本:0.16.45 你能重现演示中的这个bug吗?[x] 是的[ ] 不 预期的行为是什么? 给定一个父元素,其样式为“display: flex”和“flex-direction: column”,子元素的样式为“float: left”,排序器应为水平排列,因为结果中元素是垂直对齐的。 目前的行为是什么? 分拣器会是竖式的。 你能附上截图、截屏或实时演示吗?[x] 是(附上)[ ] 不 https://jsfiddle.net/fzb4u7rd/ <img width=“741” alt=“截圖 2021-04-09 下午6 18 38” src=“https://user-images.githubusercontent....

ClaudeCode

谢谢你举报,@YumiChen。 flex-direction: column 和 float: left: 使排序器方向错误的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示...

#33952021年4月9日作者 Abhisheknanda13444632 个回答
1 个反应

观察 -:移动视图不一致

你好@artf请观看附带的视频。 我检查过移动视图,发现移动视图和编辑移动视图不同。 大家有什么看法吗? 或者说,应该是这样工作 [屏幕录制 2021-04-09 2:55.45 PM.zip](https://github.com/artf/grapesjs/files/6284716/Screen.Recording.2021-04-09.at.2.55.45.PM.zip)

Abhisheknanda1344463

已经修好了。 问题已定。

ClaudeCode

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

#33922021年4月7日作者 rywilson283 个回答
0 个反应

功能:允许使用函数进行动态可丢弃配置

我有一个要求,不能用选择器来判断某个元素是否可以丢弃。 例如: ![图片](https://user-images.githubusercontent.com/45426659/113861790-96afbf00-9775-11eb-9369-2a18a71c0dd6.png) “子”组件必须位于“父”组件中,但如果子组件包含 ref 属性,只能将其拖入与当前父组件匹配的 ref 值的其他父容器中。 根据上述标记,子组件可以丢弃到最后一个容器,但不能丢弃参考为5678的容器。 不过,第二个子元素可以被丢弃到任一父组件中。 如果可丢弃函数允许以下函数,这将很容易实现: 可掉落:(src,目标)=> { 一些逻辑 返回真值; },...

rywilson28

相关公关:https://github.com/artf/grapesjs/pull/3393

rywilson28

@artf对这个功能或PR的做法有任何疑问吗?

ClaudeCode

谢谢你举报,@rywilson28。 关于FEAT:允许使用函数动态丢弃配置的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件...

浏览所有主题