GrapesJS 问题

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

找到 877 个问题

🔍 question
#36642021年8月3日作者 codingmachine162 个回答
0 个反应

如何发布由GrapesJS生成的版面

你好@artf 我们的GrapesJs编辑正在运行 http://localhost:5500/editor ![图片](https://user-images.githubusercontent.com/87995581/128018584-1ba2bc43-aeca-4e14-90dd-7bb986816072.png) 我们想在 http://localhost:5500/ 但在前端,面板显示,编辑模式开启。如何禁用编辑模式和隐藏面板 ![图片](https://user-images.githubusercontent.com/87995581/128018838-f0128973-0a49-4092-b91f-19755...

artf

我就结束这条了,因为你已经在这里开启了讨论区 https://github.com/artf/grapesjs/discussions/3666

ClaudeCode

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

#36622021年8月2日作者 aliibrahim1233 个回答
1 个反应

优点:样式管理器文本类型

Grapesjs Style Manager 有很多很棒的功能, 但它没有文本属性类型, 那为什么不加它呢

artf

@aliibrahim123如果你不指定任何类型,会创建一个简单的文本类型属性:)

aliibrahim123

你好 我做了一个简单的文本代理类型 这是代码 styleManager.addType('text', { create({ props, change }) { const el = document.createElement('div'); el.innerHTML = '<input type=“text” class=“my-input” />'; const inputEl = el.querySelector('.my-input'); inputEl.add...

ClaudeCode

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

#36572021年7月30日作者 san-1232 个回答
0 个反应

如何动态更新视频标签的原始字符?

你好@artf, 我有拖放多个视频标签,每个都生成随机数到ID属性。 有两件事值得怀疑, 首先,我尝试了基于ID属性更新的src视频标签示例路径,但对我来说没用。 如何将 src 更新为基于视频标签的 ID 属性? 第二个是风格经理的问题, 样式管理器处理图像标签, 新增了内联样式,例:.rt123{Height:120px;宽度:200px;}对于图片,.rt123 是 ID 属性。 对于视频标签,Id属性是randmID,所以风格管理器不应用到视频标签上。如何改变这种状况。

artf

@san-123,请按照问题模板制作一个可复现的演示,因为很难理解这里出了什么问题

ClaudeCode

感谢你报告,@san-123。 关于如何动态更新视频标签的原始代码,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

#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) => { 你的逻辑 }); ``` 替代方...

#36532021年7月28日作者 Chetan11-dev3 个回答
0 个反应

富文本

如果你双击富文本,光标会移动到起始位置,而不是在双击的位置。 解答:https://stackoverflow.com/questions/12920225/text-selection-in-divcontenteditable-when-double-click/68496971#68496971 <- CHETAN 的可运行答案

artf

欢迎公关

no-response[bot]

由于我们请求原作者提供更多信息未获回应,本期已自动关闭。仅凭当前期刊中的信息,我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案,请随时联系我们,以便我们进一步调查。

ClaudeCode

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

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

#36442021年7月26日作者 NoumanAhmad-Braqsol2 个回答
0 个反应

当 getHtml() 调用时,链接显示为 span

嗨,@artf 我用 CKEDITOR 添加链接到选定文本中,运行正常。我用这个代码来添加链接 ![ASDASD](https://user-images.githubusercontent.com/72378934/127009758-7803aa7f-832d-4f2d-ab3f-a84d4bba252a.PNG) 它显示为上述 另外,如果我检查SRC,DOM里显示有个链接,显示为blow ![SDSD](https://user-images.githubusercontent.com/72378934/127009932-7f3c5a44-d17d-4160-ac94-6445668760f0.PNG) 但当我getHtm...

artf

@NoumanAhmad-Braqsol,请在打开BUG问题时遵循议题模板(这确实不是核心漏洞,但可能与你的ckeditor配置有关),否则请开启新的讨论区

ClaudeCode

感谢你报告,@NoumanAhmad-Braqsol。 关于 link(当 getHtml() 调用时显示为 span 的问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', (...

#36402021年7月23日作者 jlpatrick2 个回答
0 个反应

样式管理器的背景UI在Body/Wrapper上无法正常工作

在我看来,样式管理器的背景控件在处理主体与其他组件时存在一个UI错误。这个问题在#2834的截图中@kuhelbeher可以看到,但我也会提供一些简单的复现步骤。也许这个问题和那个问题有关。前往 https://grapesjs.com/demo.html删除所有现有组件,直到只剩下Body/包装器选择“身体”并设置背景图像(注意这里背景UI的身体图像设置长什么样)打开方块,拖动导航栏到页面顶部在导航栏上设置背景图像,编辑器中应该能渲染此时再次选择主体/封装器,然后查看背景UI(看起来它知道已经设置了非默认设置,因为标签颜色变了,重置图标可见,但第1层没有显示)在编辑器中选择导航栏,并比较它在背景UI中显示的内容(第1层正确显示)...

artf

谢谢你,Jim,是的,问题确实一样,所以我把这个作为#2834的重复关闭 修复后我会在那里更新。

ClaudeCode

谢谢你举报,@jlpatrick。 样式管理器后台UI在Body/Wrapper上无法正常工作的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——...

浏览所有主题