PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

GrapesJS 问题

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

找到 3,464 个问题

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

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

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

artf

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

edenizk

谢谢你的回答 🙂

GJSBlock

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

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

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

GrapesJS 版本[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

GJSBlock

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

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

Outline disappears after applying loadProjectData

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 勇敢的最后版本 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞?打开演示页面打开开发者工具跑动: let projectData = editor.getProjectData()跑: editor.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”中找不到(模块没有导出功能)

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

mnutt

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

mnutt

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

artf

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

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

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

GrapesJS 版本[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); 只跑一次 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: ![图片](h...

artf

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

chaegumi

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

GJSBlock

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

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

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

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

artf

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

GJSBlock

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

#48472023年1月15日作者 wunksert3 个回答
0 个反应

Css edits aren't persisted to the DOM

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome 版本 109.0.5414.87 描述一下那个虫子 如何复现这个漏洞?在 GrapesJS 画布上创建@keyframes动画在 JS 中,通过将以下字符串传递到编辑器中创建新的 CssRule。Css.addRules:将其添加到画布上: editor.Css.addRules(updatedRule) 预期的行为是什么? DOM应该更新 目前的行为是什么? DOM没有更新。不过,如果我调用 editor.getCss(),我能看到不透明度的正确值正在返回。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 行为准则[X]...

artf

似乎与 CssGroupRuleView [这里](https://github.com/artf/grapesjs/blob/e6a086afac77d8da73f225dd0aa84b3d178ec47b/src/css_composer/view/CssRulesView.ts#L64-L80)有关。对于像“@keyframes”这样的at规则,我们必须强制重新渲染父容器。

wunksert

@artf又遇到了“editor.”这个问题。CssComposer.remove(myCssRule)' 编辑器CSS会移除规则,但规则不会被冲入DOM。你建议我如何在保持编辑器状态不变的情况下强制重新渲染 DOM?“editor.refresh” 并没有把样式冲入 DOM

GJSBlock

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

#48412023年1月14日作者 chaegumi1 个回答
0 个反应

不要使用 component.addAttributes({[traitName]:value}),有时应该使用 component.set(traitName, value)

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 108.0.5359.125 可复制演示链接 https://codesandbox.io/s/sweet-hugle-w00pqx 描述一下那个虫子 如何复现这个漏洞?拖我的街区查看代码 预期的行为是什么? 不想要特征2=“特征2” 目前的行为是什么? 具有特征2=“特征2” 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: ![图片](https://user-images.githubusercontent.com/9654650/212448739-0f23d7b1-f8bf-49d2-a420-be02a1328...

GJSBlock

谢谢你举报,@chaegumi。 关于不要用component.addAttributes({[traitName]:value}),你有时应该用component.set(traitName,value),这是个很好的问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式...

#48372023年1月10日作者 quentin-bettoum4 个回答
4 个反应

HTML元素的ID会在projectData加载的不同页面上递增

GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器? Firefox 109 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好, 我注意到当我在 projectData 中加载多个 HTML 中使用相同id的页面时,grapes 会自动在每个页面上递增id,尽管这些页面是不同的。 为了演示这个问题,下面有一段代码,我用包含两个页面的 projectData 初始化,grapesjs 页面在某些 HTML 标签上使用相同的 ID。 在最终的HTML列表中,你可以看到body和main-title等id在第二页被递增到body-2和main-titl...

artf

嘿,@bgrand-ch,我认为有一天所有Grapesjs实体都会有一个全局“UID”,所以从长远来看,我预计这个问题会被修复 🤞

quentin-bettoum

起初,我想把所有页面一起生成,这样所有页面都能输出一个统一的CSS输出。但现在我尝试另一种风格方案。 所以对于“id”问题,分别生成每个页面可能是解决方案。谢谢你的建议。

bgrand-ch

Grapes 使用一些数据属性(类似“data-grapes-id”)作为唯一标识符,以便让 id 留给某些前端脚本使用。 我喜欢这个想法 💯

#48172023年1月2日作者 sdimitrenco2 个回答
0 个反应

如果 div 内部有标签 p >的 span,就无法在 div 内部编辑文本节点。

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome 版本 108.0.5359.125,Mozilla 107.0可复制演示链接 https://jsfiddle.net/stanislavdimitrenko/d61cm4yg/14/描述一下那个虫子 所以, grapes js. 如果你有那个结构体 “某些没有包装的文本”——你不能编辑那段文字。 Grapes 不能编辑...... 如果改变了这一点,那你就可以。 或者,如果你给文本加装,同样可以编辑。 也许需要设定剧本工作 grapesjs 或限制? 行为准则[X] 我同意遵守本项目的行为准则

artf

是的,目前这是解析文本节点没有适当封装和文本组件作为兄弟节点的预期行为。所以为了让这些节点可编辑,你必须正确地用类似标签的范围包裹它们。

GJSBlock

谢谢你举报,@sdimitrenco。 如果 div 在 page p > span 内有标签,无法在 div 内编辑文本节点的问题,似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤:** 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重...

浏览所有主题