GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#36812021年8月7日作者 Joshmamroud4 个回答
0 个反应

Textable无法与扩展文本组件兼容

版本: 0.17.22 你能重现演示中的bug吗?[X] 是的[ ] 不 预期的行为是什么? 应该能够将文本元素放入自定义组件中,从而扩展文本组件 目前的行为是什么? 不能把可文本的组件放进一个扩展文本组件的自定义组件里 你能附上截图、截屏或实时演示吗? [演示](https://codesandbox.io/s/compassionate-andras-8h8m4?file=/index.js)[X] 是的(附上)[ ] 不

artf

嘿@Joshmamroud这里其实有个关于文本成分的普遍问题 #2771

Joshmamroud

谢谢你,@artf。我觉得我的问题更多是自定义组件,它扩展了文本组件。Textable在原始文本组件中工作正常,但当我尝试创建自己的自定义文本组件时,就遇到了问题。不仅仅是Textable,我注意到扩展文本组件也会失去一些其他功能。我现在一时想不起具体的。是不是我在扩展文本部分方面做错了什么?

artf

从你的演示来看,我没看到扩展的“文本”部分有问题,只有与文本相关的问题

#36792021年8月6日作者 imouou2 个回答
0 个反应

设备宽度默认无效

感谢#3673 我收到了一个新的bug反馈。 版本:。 0.17.22 你能重现演示中的bug吗?[ ] 是的[ ] 不 预期的行为是什么? 我希望默认宽度是移动设备的宽度,所以我设置了最小宽度优先级,但选择框默认显示的是移动宽度,页面宽度没有变化。我用的是editor.setDevice('Mobile');是的,但在新页面管理中,新页面也是一样的,我继续用这个方法是无效的,所以我觉得应该有更好的处理方式。 详细描述那个漏洞 目前的行为是什么? 详细描述那个漏洞 你能附上截图、截屏或实时演示吗?[ ] 是的(附上)[ ] 不 ![2021-08-06 10 29 54](https://user-images.githubuse...

artf

是的,你说得对,实际上没有选择默认设备的选项...... 目前作为变通方法,先在初始化后手动操作: “''js const editor = grapesjs.init({...}); editor.setDevice(“移动”); 在下一个版本中,我会在设备管理器配置中添加“默认”选项 “''js deviceManager: { 启动时选择的设备“id”如果未标示,将使用“设备”中最先可用的ID。 默认:“移动”, 设备:[...], }, ```

ClaudeCode

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

#36752021年8月5日作者 rywilson281 个回答
0 个反应

即使徽章下方有空位,也会遮挡元素内容

版本: 0.17.23 你能重现演示中的bug吗?[x] 是的[ ] 不 如果该元素放在画布顶部,徽章可能会遮挡该元素的内容。 ![图片](https://user-images.githubusercontent.com/45426659/128348057-e2550bac-4ded-448a-a64a-0ca1b374a8ec.png) 预期的行为是什么? 如果有空间,标签应放在元件下方。 ![图片](https://user-images.githubusercontent.com/45426659/128348466-f60822ea-8c6d-42f7-9668-2f3d89c1bc65.png) 你能附上截图、截屏或...

ClaudeCode

谢谢你举报,@rywilson28。 徽章“即使元素下方有空间,也可能遮挡元素内容,这似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更...

#36742021年8月5日作者 sriya-srinivasan4 个回答
1 个反应

隐形网络组件

版本: 0.17.19 目前的行为是什么? 新增的 webcomponent 是可见的: 在 grapesjs 容器内添加网页组件时,如果组件在 shadow DOM 中有元素,组件是空的。(如果不使用 shadow dom 创建组件,则没有问题。)在图层管理器中可以看到,但是空的 ![第1期](https://user-images.githubusercontent.com/78800503/128315538-ae05c799-9a0f-402d-a74c-b001fa2ad03c.PNG) 这里我们可以看到内部和外部元素的差异。阴影根不可见。 预期的行为是什么? grapesjs canvas 内的 webcomponen...

artf

我在这里发了一个变通方法 https://github.com/artf/grapesjs/issues/3693

artf

嘿,@sriya-srinivasan,你能做一个可复现的演示吗?

artf

@sriya-Srinivasan,有什么最新进展吗?

#36682021年8月3日作者 anatoli-dp4 个回答
0 个反应

移动/缩放后无法重置画布

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么? 一种在缩放和移动后将画布重置回默认位置的方法。 详细描述你的功能需求详细 缩放后再移动画布后,你可以创建一个函数,调整大小并将...

artf

我不太明白你的问题,具体是怎么移动/缩放画布的?这无关,但有没有功能可以调用来缩放内容,而不是画布?比如我想放大,比如放在某个非常高DPI的页面上,以便更好地编辑。还是应该手动调整iframe缩放?因为iframe放大当然会放大工具/选择轮廓 ['编辑。Canvas.setZoom'](https://grapesjs.com/docs/api/canvas.html#setzoom)在你这种情况下不起作用吗?

anatoli-dp

我用编辑器来调整。用Canvas.setZoom,然后用空格键移动它。目前我移除了之前做过的部分,但大概是拿到画布元素,然后通过样式更新来定位它。不过这种变化不是永久性的,只要稍微移动,它就会跳回原位,比如如果它在26xx、18y(或26上、18左)的位置,稍微移动它会跳回那些坐标,而不是如果它是从0,0开始移动,如果它是天边。有没有什么功能可以把画布位置重置回视角中心,并重新缩放到100%?

artf

如果你说的是移动坐标,我们还没有直接的 API,但你实际上可以通过这种方式获取或更新坐标: “''js const canvasModel = editor.Canvas.getModel(); 获取数值 const { x, y } = canvasModel.attributes; 更新数值 canvasModel.set({ x: x + 50, y: y + 50 }) ```

#36612021年8月1日作者 aliibrahim1231 个回答
0 个反应

样式管理器无法工作(样式无影响)

你好, 我正在开发一个插件,可以把CSS3的所有属性添加到Grapesjs中。 但我一直用样式管理器,样式不会叠加, 版本:1.17.19 CSS 解析器:Grapesjs-Parser-Postcss风格经理部门 [{ 姓名:“将军”, buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], 性质:[{ 名称:“阵容”, 属性:“浮动”, 类型:“无线电”, 默认值:“无”, 列表:[ { value: 'none', className: 'fa fa-times'}, { value: 'left', className:...

ClaudeCode

谢谢你举报,@aliibrahim123。 感谢你分享关于风格管理器失效(样式无影响)的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地识别和优先排序修...

#36552021年7月30日作者 TRIGGEREDcoder2 个回答
0 个反应

表单按钮名称的更改没有被生成的HTML代码捕捉到

版本: 版本 0.17.19(grapesjs) 版本 0.1.11(grapesjs-preset-webpage) 你能重现演示中的bug吗?[ ] 不 预期的行为是什么? 如果我通过在组件设置中更改按钮的文本来更改按钮名称,这些变化应该会反映在Canvas和代码视图中的HTML代码中。 详细描述那个漏洞 我在画布上拖动一个表单组件。 选择按钮标签,进入组件设置。 选择按钮类型并更改文本。 屏幕上的按钮文字会变化,查看代码HTML上的按钮类型也会变化,但按钮名称完全没有反映出来。 目前的行为是什么? 按钮标签被更改,HTML代码里根本没有体现。 你能附上截图、截屏或实时演示吗?**[ ] 是的(附上) 和Codebox一样,g...

artf

你好@TRIGGEREDcoder,预设网页插件存在问题,该插件引用了包含该漏洞的旧表单插件。所以,我决定关闭这个插件,因为它不属于核心,并且会很快更新插件引用。

ClaudeCode

谢谢你举报,@TRIGGEREDcoder。 “表单按钮名称的更改没有被生成的HTML代码捕捉到的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤:** 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox...

#36542021年7月30日作者 NoumanAhmad-Braqsol1 个回答
0 个反应

Editor.setComponents(html)和pageManager.select(pageId)未加载js脚本

嗨,@artf据我所知,allowScripts:1 允许 grapesjs 加载脚本。我第一次加载着陆页时,它运行正常。它能加载所有JavaScript。之后,当我使用 editor.setComponents(html) 或 pageManager.select(pageId) 来处理与 LandingPage 使用的同一个 HTML 字符串时,JavaScript 不行。appendOnClick:1 这样可以让该块添加 OnClick,这样就能正常工作了。但它将块附加到所选元素 中。 我的问题是,在Onclick的特定位置上该给谁添加一个块。 实际上,我想把该块作为所选元素的下一个兄弟块添加。

ClaudeCode

感谢你报告,@NoumanAhmad-Braqsol。 关于 [QUESTIONS] editor.setComponents(html) 和 pageManager.select(pageId) 不要加载 js 脚本 的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方...

#36522021年7月28日作者 NoumanAhmad-Braqsol4 个回答
0 个反应

葡萄 js 如果我把文本改成链接,它不会识别链接。

你好@artf ![捕获](https://user-images.githubusercontent.com/72378934/127296691-17ee71ac-4525-426a-933d-fecd81fdf86f.PNG) 我刚接触 Grapes JavaScript,写了一个函数将 selet 文本转换成链接。它运行良好。 当我选择组件类型时,它显示它是一个文本。 刷新页面后,它识别出一个链接。但我不想刷新它。怎么做? 你可以看到上面“优势”现在是一个链接,但在控制台上显示是文本

artf

你说的是CKEditor还是默认的RTE?

NoumanAhmad-Braqsol

我用的是CKEditor。

artf

那这不是正确的仓库

#36452021年7月26日作者 codingmachine162 个回答
0 个反应

请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CO…

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

codingmachine16

你好@artf 你好, 我们正在用葡萄Js构建一个CMS。我们创建了页眉、页脚、产品滑块等多种横幅的组合。我们几乎完成了一个电子商务网站,使用了 grapesjS + React Js + NodeJs 和 Mongdb。我们可以存储和加载组件进出数据库。 比如我们的网站管理员部分就是 abc.com/editor 这里我们正在创建布局,并存储和加载页面 我们在前端遇到了问题。例如,abc.com/home 这里我们想显示存储的组件,并绑定动态数据。我们不想在前端用编辑器。...

ClaudeCode

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

浏览所有主题