GrapesJS 问题

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

找到 743 个问题

🔍 bug
#49002023年2月5日作者 handhikadj2 个回答
0 个反应

SetStyle/getCss() 生成重复的 CSS

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 最新动态可复制演示链接 https://codesandbox.io/s/silent-river-ifczcv描述一下那个虫子 如何复现这个漏洞?访问网站参见控制台。注意“”和“body”选择器 预期结果 不应重复 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js editor = grapesjs.init({ storageManager:false // ... }) editor.on(“update”, () => { 保存到后端 console.log(“editor getCSs”, editor.getCs...

artf

有一些默认样式应用,你可以简单地禁用(传递空字符串)https://github.com/GrapesJS/grapesjs/blob/a83847b1b35e69e5a5810ccf1eb1e1384bf0aab1/src/editor/config/config.ts#L143-L147

ClaudeCode

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

#48972023年2月3日作者 rudacs4 个回答
1 个反应

Component:styleUpdate / component:styleUpdate:propertyName 未被触发

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge 109.0.1518.70 可复制演示链接 https://jsfiddle.net/rudacs/kr2x1mnh/ 描述一下那个虫子 如何复现这个漏洞?在 StyleManager 中更改某些属性。更改 StyleManager 中的宽度属性。 预期的行为是什么? 事件 component:styleUpdate 被触发。 目前的行为是什么? 不会触发任何事件 component:styleUpdate。 行为准则 [X] 我同意遵守本项目的行为准则

artf

嘿,@rudacs你试过用'style:property:update'吗?

rudacs

这个活动奏效了。它被改成了这个吗? 而且只针对一处房产? 我该如何获得组件和属性被更改的? 特朗克。

SagarMaria

我来这里是因为我也有同样的问题。 使用建议的“style:property:update”似乎有效,但不知为何每次点击都会触发。 另外,我们如何针对某个特定的样式属性变更,比如“文本对齐”?

#48682023年1月26日作者 LukasSouza2 个回答
1 个反应

悬停的框在更改编辑器位置后显示错位

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 109.0.5414.87 可复制演示链接 https://jsfiddle.net/o45ncveu/6/ 描述一下那个虫子 如何复现这个漏洞?打开小提琴链接在超时前悬停部分组件等待时间结束以添加边距并更改编辑位置再次悬停组件 预期的行为是什么? 悬浮方块应与组件边距对齐 目前的行为是什么? 更改编辑器位置后,悬停方块显示与组件错位行为准则 [X] 我同意遵守本项目的行为准则

artf

不幸的是,这是预期中的,你必须在“外部”布局更改后使用 'editor.refresh()'。

ClaudeCode

谢谢你举报,@LukasSouza。 安全和依赖性问题很重要。GrapesJS 团队积极致力于保持依赖系统的更新。 为你现在: 运行“npm审计修复”以查看可用的补丁 查看是否有更新的GrapesJS版本,可能已经解决了这个问题 如有稳定版,升级前先测试最新稳定版 如果漏洞非常严重,可以使用“npm audit fix --force”,但请务必彻底测试 理解风险: 在GitHub安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定条件下触...

#48652023年1月24日作者 agreif2 个回答
0 个反应

'@' 登录 class-attribute 块内容的值,在使用模板文字时将 '-' 符号更改为

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Firefox 108.0.2可复制演示链接 在JSfiddle里不行描述一下那个虫子 Grapesjs-CLI - 3.0.1 Grapesjs - 0.20.3 如何复现这个漏洞?添加一个带有带有 '@' 符号的 class 属性的 newblock,该模板为字面量 “''js bm.add('foo', { 标签:“Foo”, 内容: <div class=“uk-width-1-2@m”> <div>一些文字</div> </div> , });其他繁殖可能性: 用“导入”工具打开代码,将“class”属性改为包含“@”符号。 省省吧。然后当你重...

artf

我会更新逃脱功能,目前你可以通过[此选项](https://github.com/artf/grapesjs/blob/f08b5afe6f79626e734de330fbff3c30824c04a9/src/selector_manager/config/config.ts#L27-L32)提供自己的。

ClaudeCode

谢谢你举报,@agreif。 关于使用模板文字时,类别属性值将块块内容改为“-”符号的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

#48612023年1月21日作者 edenizk3 个回答
1 个反应

<br/>是在 Firefox 首次进入空格后添加单行文本

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 可复制演示链接 https://jsfiddle.net/8rm5wv2y/1/ 描述一下那个虫子 如何复现这个漏洞?在Firefox中打开示例页面(无修改)点击显示代码,你会看到没有插入“'<br/>'元素在“Hello World!!”后按空格,如果你愿意,可以添加任何文本再次点击“显示代码”,你会看到在添加新文本后,会添加“<br/>''元素 预期的行为是什么? 如果用户没有按回车或 Shift+回车,而是在单行书写,我希望不会出现 '<br/>' 元素。就像镀铬那样。 目前的行为是什么? 每当用户向现有文本添加文本时,Grap...

artf

不幸的是,这与 grapesjs 本身无关,而是 Firefox 如何处理可编辑文本。我想一个选择是切换到某个自定义的富文本编辑器,不依赖原生行为。

edenizk

谢谢你的回答 🙂

ClaudeCode

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

#48592023年1月20日作者 zoilorys2 个回答
0 个反应

编辑 CSS 属性将样式设置为一个通用类,而不是元素

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v108可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞?设置 grapesjs 编辑器导入模板 https://pastebin.com/d9S2M0iS在模板的最底部,你会看到包裹的Facebook按钮选择它所在的表格单元格,尝试改变其宽度 预期的行为是什么? 当元素的样式属性被编辑时,样式应仅更新所选元素。 目前的行为是什么? 出于某种原因改变单元格宽度会编辑该模板中的通用类,该类也会应用到其他元素上,导致意外行为(见视频)。我无法在演示设置中复现这些,也无法向公众提供我们...

artf

你只需要启用这个选项: https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors

ClaudeCode

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

#48552023年1月19日作者 ronaldohoch4 个回答
1 个反应

应用 loadProjectData 后,轮廓会消失

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 勇敢的最后版本 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?打开演示页面打开开发者工具运行: 'let projectData = editor.getProjectData()'跑:'编辑。DomComponents.clear()'运行:editor.loadProjectData(projectData); 预期的行为是什么? 组件轮廓应被展示。 目前的行为是什么? 应用项目后,组件的轮廓没有显示。行为准则 [X] 我同意遵守本项目的行为准则

allenhwkim

@ronaldohoch用Edge浏览器,它用的是你提供的命令。 'let projectData = editor.getProjectData();' “编辑。DomComponents.clear();' 'editor.loadProjectData(projectData);' 我觉得GrapesJS不支持Brave浏览器,而Brave浏览器在 https://github.com/browserslist/caniuse-lite 里没有列出。 <img wid...

ronaldohoch

我还运行了命令 'editor.runCommand(“core:component-outline”)',但又没显示,我需要点击按钮两次才能显示

ronaldohoch

你好,@allenhwkim,谢谢你的评论。但尴尬的是我没在其他浏览器里测试。 我相信我的客户不使用Brave,所以我打算放弃这部分。 不过,通过所有这些测试,我成功地让它按我想要的方式工作,应用了以下代码: “''js editor.loadProjectData(JSON.parse(sessionStorage.getItem(commandOpts.value))); if(editor.Commands.isActive(“sw-visibility”){ 编辑。...

#48542023年1月19日作者 mnutt4 个回答
1 个反应

导出“default”,但“backbone”中找不到(模块没有导出功能)

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 109 可复制演示链接 没有 描述一下那个虫子 如何复现这个漏洞? 预期的行为是什么? 开发服务器启动。 目前的行为是什么? 我用的是node v16.18.1(MacOS),虽然在节点14和节点18上也出现了同样的结果。是不是我做错了什么明显的错误? 行为准则 [X] 我同意遵守本项目的行为准则

mnutt

是的,我也能用“grapesjs-style-filter”重现,同样的错误类型。

mnutt

我通过修改构建流程,通过“--targets=”“> 3%”'来绕过了这个错误,但由于使用es6类,这会导致骨干错误。

artf

我这边用全新安装无法复现,你用的是开发分支吗?

#48512023年1月17日作者 chaegumi3 个回答
0 个反应

This.on('change:attributes:type', this.handleTypeChange)不支持数组类型

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 108.0.5359.125可复制演示链接 https://codesandbox.io/s/frosty-darkness-7po7xl描述一下那个虫子 如何复现这个漏洞?使用 myBlock点击测试按钮 预期的行为是什么? this.on(“change:list1”, this.handleList1Change); 每次都要工作 目前的行为是什么? this.on(“change:list1”, this.handleList1Change); 只跑一次 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 从“grap...

artf

监听者看不到深度变化,所以这种情况下你得重新创建一个数组 “''js component.set(this.traitName, [...this.items]); ```

chaegumi

谢谢@artf。 我用 JSON.stringify 和 JSON.parse 来处理数据。

ClaudeCode

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

#48482023年1月16日作者 NicoGGG2 个回答
1 个反应

内联编辑后,组件内容被设置为空字符串

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox v91.4.1 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?访问 grapesjs 基础演示:https://grapesjs.com/demo.html清理画布添加组件链接在浏览器控制台中执行 'editor.getComponents().models[0].attributes.content'。输出是“Link”,即链路组件的内容通过内联编辑来更改链接文本再次在浏览器控制台执行“editor.getComponents().models[0].attribu...

artf

这是与富文本编辑器相关的一些逻辑所预期的。 你可以用 'component.getInnerHTML()' 获取内部 HTML,或者用 'component.components()' 获取内部组件。

ClaudeCode

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

浏览所有主题