GrapesJS 问题

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

找到 336 个问题

🔍 style-manager
#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...

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

#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配置 有了这些细节,维护者可以更快地识别和优先排序修...

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

#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', (...

#36422021年7月25日作者 Ubanna1 个回答
0 个反应

多页面管理器重置设备管理器

你好,我遇到了页面管理器的小问题。我希望所有页面的分辨率都是固定的。 高度和宽度图形来自 API,我可以在单页模板上成功显示所需的分辨率。 但在多页模板中,一旦切换到不同页面,设备管理器会重置为全屏(默认)。 我该如何实现目标,才能在所有页面中正确显示所需的分辨率? 请看下面我用 React js 写的代码:

ClaudeCode

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

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

#36312021年7月21日作者 anuragk154 个回答
1 个反应

如何在最终的HTML文件中加载动态内容?

我到处找了,包括问题区,也尝试了几种方法。但我真的不太确定如何在组件中总是加载动态内容(不仅仅是导出或通过编辑器保存时)。 我想在我的 Grapejs 组件中包含一个脚本,它总是从网页抓取内容并更新组件。 比如,当我写博客并将其存储到数据库中时,现在每当有人访问我的落地页(用Grapesjs制作),我希望他们能看到我最新的博客。 我不想手动通过编辑器重建我的葡萄页面。 另外,如果有终端用户访问网站,我只需要发送 Grapejs 的 html 和 css 对吧?没有组件? 抱歉如果这是个新手问题或者有人之前已经回答过。

stf1981

我觉得你应该搜索组件相关的JavaScript -> https://grapesjs.com/docs/modules/Components-js.html#component-related。这段 js 代码嵌入在 html 输出中。

anuragk15

我记得你会搜索与组件相关的JavaScript -> https://grapesjs.com/docs/modules/Components-js.html#component-related。这段 js 代码嵌入在 html 输出中。 所以每次组件加载时,它都会通过 JS 脚本动态加载数据?另外,对于终端用户来说,我只需要返回 Grapesjs 生成的 html+cas 文件,对吧?

stf1981

所以每次组件加载时,它都会通过 JS 脚本动态加载数据? 是的另外,对于终端用户,我只需要返回由 Grapesjs 生成的 html+cas 文件,对吧? 是的,组件里的 JS 脚本在 HTML 里,参见 'editor.getHtml()'

#36272021年7月17日作者 sanchit364 个回答
4 个反应

:我正在尝试复制页面,但由于 ID,样式无法应用,结尾的 -2,-3 发生了变化。

“JavaScript const duplicatePage = (编辑者) => { let components = editor.getHtml(); 令 css = editor.getCss(); 让newPage = 编辑器。Pages.add({ 样式:CSS, 组件:组件, }); 编辑。Pages.select(newPage); }; ``` 这就是我的功能。我正在尝试复制页面,HTML部分没问题,但由于CSS是通过ids应用的,当新页面渲染时,id的结尾会变为-2。 有没有什么方法可以防止这种情况,或者有其他方法可以做到这一点?

OrigoVl

@sanchit36 你好,你在解决问题吗?你能说出来吗?

vlont

用这个 “''js const page = 编辑?。Pages.getSelected(); 编辑?Pages.add({ id: (page.get('name') || page.id) + '-copy', component: page.getMainComponent().clone() }, { select: true });'''

leonardolima99

@vlont 谢谢!

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

样式管理器大小未设置为图像控制

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

san-123

它的复制品

ClaudeCode

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

浏览所有主题