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

GrapesJS 问题

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

找到 466 个问题

🔍 components
#47912022年12月19日作者 joukhar2 个回答
0 个反应

即使包含了Touch插件,Block:Drag事件在触摸设备上依然无法工作

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 桌面版本 108.0.5359.125 最新版本 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞? 当从块管理器拖拽组件时,事件不会触发。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 行为准则 [X] 我同意遵守本项目的行为准则

artf

谢谢@joukhar实际上“阻挡:拖拽”事件存在一些不一致,我会在下一个版本中尝试修复。

GJSBlock

谢谢你举报,@joukhar。 关于block:drag事件在触摸设备上即使包含了触摸插件也无法正常工作,这个问题非常好。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('s...

#47652022年12月2日作者 wunksert4 个回答
3 个反应

The documented way to parse @keyframes does not work

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome v107描述一下那个虫子 如何复现这个漏洞?按照以下说明[这里](https://grapesjs.com/docs/guides/Custom-CSS-parser.html#rule-objects)创建你自己的CSS解析器,并输入@keyframes规则CSS字符串。我用了这里的预建帖子解析器:[这里](https://github.com/artf/grapesjs-parser-postcss/blob/master/src/parser.ts)结构从解析器中导出并与文档匹配(见附图),但没有动画 <img width=...

artf

你好@wunksert之前有个与关键帧相关的问题[这里](https://github.com/artf/grapesjs/issues/4727),已经修复但还没发布。

artf

修复该修复可在最新版本中 https://github.com/artf/grapesjs/releases/tag/v0.20.2

wunksert

@artf太棒了!你知道什么时候会发布吗?

#47632022年12月1日作者 quentin-bettoum2 个回答
0 个反应

_undoexc status open

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Firefox 106可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 你好, 当我从 0.19.5 升级到 0.20.1 时,我注意到用 editor.getProjectData() 得到的页面 JSON 比以前明显更重。 区别在于,在0.20.1中,JSON中的每个组件都包含以下代码: 我猜问题可能是从 [组件被转换成类](https://github.com/artf/grapesjs/blame/143414408e0b6f37645fc07714f142280d88961d/src/dom...

artf

哦,是的,那应该被删除,谢谢。

GJSBlock

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

#47542022年11月30日作者 jasonliang-dev2 个回答
0 个反应

Closing `</script>` tag not escaped for script properties

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 版本 107.0.5304.122(64 位) 可复制演示链接 https://jsfiddle.net/j5khz1gm/ 描述一下那个虫子 如何复现这个漏洞?创建具有以下默认属性的自定义组件类型:将自定义组件添加到画布中获取带有 editor.getHtml()的页面HTML内容 将HTML插入编辑器外的div 预期的行为是什么? 本以为生成的HTML中会跳出关闭脚本标签。不应该出现警报对话框。 目前的行为是什么? 脚本标签不会逃逸。svg 标签显示在文档中。在本地 HTML 文件中使用下面的代码总是执行 alert(1)...

derciesto

@jasonliang-dev,有最新进展吗?我也遇到同样的问题。

GJSBlock

谢谢你举报,@jasonliang-dev。 关于关闭“</script>'标签未逃脱脚本属性的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.lo...

#47522022年11月28日作者 FaisalShaikhHA3 个回答
0 个反应

带有指针事件的组件:'all'(除封装器外)或可编辑组件可以拖拽并下放到自己身上。

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome 107.0.5304.121(官方版本)(arm64)可复制演示链接 https://jsfiddle.net/artur_arseniev/aku70f5w描述一下那个虫子 如何复现这个漏洞?尝试拖拽可编辑组件或本身有 pointer-events: all CSS 的组件。它会消失。由于此操作执行无限循环,控制台 Uncaught RangeError: Maximum call stack size exceeded返回错误。即使将可拖 false 设置为可编辑组件,它依然可拖拽。 预期的行为是什么? 可编辑组件不应该像包装...

artf

演示本身有个问题,现在已经修复了(在包装组件中添加了“可拖拽:false”)

FaisalShaikhHA

getCSSS补丁让它始终返回可编辑组件的内容无法正常工作,你能帮我解决这个问题吗@artf 下面的代码(包含在可复现演示链接中)总是返回整个画布或包装器的CSS字符串。

GJSBlock

谢谢你举报,@FaisalShaikhHA。 关于带指针事件的组件:“全部”(除了包装器)或可编辑组件可以拖拽到自己身上,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change',...

#47392022年11月20日作者 hemaltandel12 个回答
0 个反应

Css class name with '/' converted to '-'

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Edge 版本 107.0.1418.52(官方构建)(64位)可复制演示链接 https://codesandbox.io/s/peaceful-glade-rbfbwt?file=/src/app/app.component.ts描述一下那个虫子 如何复现这个漏洞?用 grapejs创建新应用 调用 grapejs INIT,使用默认配置。新增名为“test1/2”的新职业使用 developer toool 输入画布 html。它被重新命名为“test1-2”。 预期的行为是什么? 类别名称不应被更改。应保持原名。例如test1/2 在之...

artf

你仍然可以使用“escapeName”选项 “''js 选择经理:{ escapeName: value => value }, ```

GJSBlock

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

#47352022年11月17日作者 vaneatka3 个回答
0 个反应

ResetId types mismatch

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 无 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞?.访问 https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js#L1839..访问 https://github.com/artf/grapesjs/blob/dev/index.d.ts#L1747 预期的行为是什么? ...resetId 应声明为方法。 目前的行为是什么? ...在 类型中,resetId 是一个可被 bool 消除的属性行为准则 [X] 我同意遵守本项目的...

artf

第一个是分量方法,第二个是块性质([此处使用](https://github.com/artf/grapesjs/blob/81295f637aa2542db9ba2aefb3ce34f0d6489d71/src/block_manager/index.ts#L166-L168))

vaneatka

我打开这个问题的原因是该方法不可见。 也许需要在类型中为方法声明创建一个新条目?比如setID /*在组件上设置新ID。 / setId(id: string): this;

GJSBlock

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

#47192022年11月9日作者 ronaldohoch1 个回答
0 个反应

尝试更改按钮和文字颜色时出现奇怪的行为

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 勇敢的最后版本 可复制演示链接 https://jsfiddle.net/qsd9zjrc/ 描述一下那个虫子 如何复现这个漏洞?打开链接(https://jsfiddle.net/qsd9zjrc/)尝试更改文字颜色尝试通过点击按钮更改绿色按钮颜色,然后进入排版![图片](https://user-images.githubusercontent.com/2287371/200911324-4575abf0-e42b-4d27-8793-ee0402f536b3.png)你会注意到颜色里有个 !important 。![图片](https...

GJSBlock

谢谢你举报,@ronaldohoch。 关于尝试更改按钮和文本颜色时出现奇怪行为的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('some...

#47042022年11月2日作者 PaulSchult1 个回答
0 个反应

Angular 组件作为自定义颜色选择器只能创建一次

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 版本 104.0.5112.101 可复制演示链接 https://codesandbox.io/s/awesome-dewdney-bwo5t1 描述一下那个虫子 如何复现这个漏洞?将文本块添加到编辑器内容中打开风格管理器,扩展装饰部门注意红色占位符,通常标准选色器所在的位置(该文本是基本的角度分量)接下来,向下滚动到“背景”标签页,添加一个新的背景再次注意红色占位符文字点击 grapes 内容的主内容,使样式管理器切换到正体设置现在再次点击文本块,向下滚动到背景标签页并展开注意颜色属性的占位符文本没有出现如果你查看浏览器的控制台,你会发...

GJSBlock

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

#46542022年10月11日作者 malonecj3 个回答
0 个反应

Custom component for text node including special characters

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v105 可复制演示链接 https://codesandbox.io/s/fancy-brook-ppyc8v?file=/index.js 描述一下那个虫子 背景: 我正在尝试配置 grapesjs ,使其能够编辑包含[Liquid template language](https://shopify.github.io/liquid/)的标记。因此,我想创建两种类型的自定义组件。 以 {{some_variable}}形式出现的模板块 以 {% if condition .... %}形式出现的条件块 自定义组件应配置为...

artf

你好@malonecj我不太确定你具体如何期望看到和管理这些组件(尤其是当你在条件内组合模板时),但我觉得你目前在“isComponent”中的处理方式不太正确,因为你必须处理文本节点。 在你的liquidhandle 'isComponent'里,你用的是'el.textContent',我觉得这应该和liquid condition用'el.nodeValue'类似,因为它只在文本节点上可用(可能最好确认一下它是否真的是文本节点'el.nodeType === 3')。...

artf

我决定关闭这个,因为核心本身没有问题,如果你还有其他问题@malonecj告诉我。

GJSBlock

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

浏览所有主题