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

GrapesJS 问题

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

找到 3,464 个问题

#38062021年9月22日作者 throne19864 个回答
0 个反应

Target :null when adding video

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome新版本 可复制演示链接 https://codesandbox.io/s/react-redux-toolkit-application-forked-l5rhp?file=/src/pages/Editor.js 描述一下那个虫子 如何复现这个漏洞?从块管理器拖拽视频到画布区域尝试通过将鼠标悬停视频并点击“使用视频”按钮来添加视频 预期的行为是什么? 当用户将鼠标悬停并点击“使用视频”按钮时,应该会在画布中的视频标签中添加一个视频 目前的行为是什么? 当用户在模态中将鼠标悬停在视频上并点击使用视频按钮时,视频根本不会被添加,在...

throne1986

@artf你能帮我解决这个问题吗?

artf

问题就在这里 “''js Editor.ON(“Component:create”, (model) => { if (model.get(“type”) === “video”) { setAddVideo(false); console.log(“视频网址”,videos.videoUrl); 编辑。Commands.run(“open-assets”, { target: editor.getSelected(), // <- 当你放下视频时,未被选中 目标:模特,...

throne1986

> 问题就在这里> “''js> editor.on(“component:create”, (model) => {> 如果 (model.get(“type”) === “video”) {> setAddVideo(false);> console.log(“视频网址”,videos.videoUrl);>编辑。Commands.run(“open-assets”, {> // target: editor.getSelected(), // <- 当你放下视频时,未...

#37942021年9月20日作者 mattnoth3 个回答
0 个反应

当宽度和高度为画布100%时,基本文本组件中的RTE重叠文本

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 版本 93.0.4577.82(官方构建)(64位) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 ![RTE已澄清](https://user-images.githubusercontent.com/6341816/134036743-d8296cf5-9027-4833-b836-711c37d40f59.png) 如何复现这个漏洞?...在官方演示中,删除所有内容/在图层面板中从仅用身体开始...添加一个基础的文本组件,图层是正体>文本 3 ...将基本文本组件的尺寸设置为100%宽...

mattnoth

我没注意到你已经关闭了我之前的问题——关于那个奇怪的使用场景。你有什么解决办法的建议吗?我一直在用 updateRte 事件监听器,动态把 RTE 放进画布里确实很有挑战

artf

@mattnoth我已经回复了你的讨论[这里](https://github.com/artf/grapesjs/discussions/3782#discussioncomment-1350537),请避免再次打开同一问题。

GJSBlock

谢谢你举报,@mattnoth。 关于RTE在基础文本组件中重叠文本,而宽度和高度100%属于Canvas,这个问题很棒。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => con...

#37832021年9月16日作者 mattnoth3 个回答
0 个反应

RTE overlapping text when text component set to 100% height

GrapesJS 版本 请帮帮我——这个问题可能在别处已经解决了,但我查了相关问题,没找到任何问题——文档里有提到要移动RTE的位置,但我不确定应该放在初始化的哪个位置——>'rteToolbarPosUpdate'是什么意思? pos 是什么意思?我只是想让 RTE 在设置为 100% 高度时,能放在文本框的底部。[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 版本 93.0.4577.82(官方构建)(64位)可复制演示链接 https://codesandbox.io/s/peaceful-feather-8pz5i描述一下那个虫子 当你进入沙盒时,必须手动将文本框的高度和宽度设置为100%——不知为何它无...

artf

这不是bug,只是一个奇怪的使用场景。

mingxin-yang

@artf我想更改rte工具栏的位置,但pos没有文档中提到的参数

GJSBlock

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

#37792021年9月15日作者 stljeff13 个回答
0 个反应

Editor.getSelected().toHTML() encodes inline javascript

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 最新款(镀铬)可复制演示链接 https://jsfiddle.net/4j1k0wde/24/描述一下那个虫子 如何复现这个漏洞?创建带有脚本标签的方块。使用 editor.getSelected.toHTML() 获取该块的标记(以便用户在弹窗对话框中编辑该块的标记) 预期的行为是什么? ...我能拿到该区块的HTML,包括脚本标签及其内容 目前的行为是什么? ...要么没有脚本标签,要么特殊字符被编码。 更多信息请见:https://github.com/artf/grapesjs/discussions/3776 使用16.12版本时,...

artf

你必须使用 allowScripts “''js const editor = Grapesjs.init({ ... allowScripts: true, }); ``` 我没看到编码问题(用真正的检查器,不要用 jsfiddle beta 控制台,后者可能有个 bug)。

stljeff1

谢谢!

GJSBlock

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

#37782021年9月15日作者 codingmachine164 个回答
1 个反应

Select options are not displaying - new anomaly

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 铬可复制演示链接 https://github.com/artf/grapesjs/issues/3735描述一下那个虫子 我遇到了与选择框相关的问题。它显示的问题和控制台一样 [特质]: 'select'类型未找到 {level: 'warning'} 当我们拖动组件并点击设置了特质的元素时,它显示的是输入文本而不是选择框。另一方面,在组件拖动后,如果我们点击任何其他元素,再点击带有特质的元素,选择框就会显示出来。非常奇怪! 注意:这个问题在这里 https://github.com/artf/grapesjs/issues/3735 上提及...

Bran72

嗨! 我从v.0.17.25开始也有你的问题。 我认为这个问题会在[下一次版本](https://github.com/artf/grapesjs/projects/30 年)中修复。 所以临时方案是降级到v0.17.22......希望对你有帮助!

artf

没错,这里已经修复了 #3735

codingmachine16

好的。当然。谢谢。供参考,这个问题在0.17.22版本中不存在,但在0.17.25版本中出现了

#37702021年9月12日作者 damnslow4 个回答
13 个反应

Improve and fix absolute dragMode

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v93 可复制演示链接 https://codepen.io/damnslow/pen/yLXXOxQ 描述一下那个虫子 如何复现这个漏洞?选择两个元素使用拖曳图标拖曳 预期的行为是什么? 两个元素应协同移动 目前的行为是什么? 只有一个元素会移动。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 不。行为准则 [X] 我同意遵守本项目的行为准则

artf

目前绝对定位存在多个问题,我想在这里全部回应:[ ] 另一个设备位置错误[ ] 在放大/平移画布上位置错误[ ] 绝对分量子的错误位置[ ] 支持多重选择[ ] 支持触摸设备[ ] 支援'%'单位 我还不确定具体什么时候会开始做,但希望很快,一如既往,任何帮助我都非常感激。

itscarlosrufo

大家好, 非常感谢你的反馈和详细讨论。 我们很高兴地分享,我们已经解决了部分需求功能。此外,我们还推出了一个新的绝对模式插件,应该能覆盖上述大部分使用场景。 你可以在我们的新文档中了解更多: https://app.grapesjs.com/docs-sdk/plugins/canvas/absolute-mode 欢迎试试,如果有其他建议也告诉我们!

fmfeit

你好,@artf, 这个功能对我当前的项目至关重要,所以我有两个问题: 是否可以付钱给你(或其他人)优先使用这个功能? 如果没有,能否说明解决问题所需的步骤,并给我一个起点?

#37632021年9月10日作者 abolabo2 个回答
0 个反应

V0.17.25 . Trait button in the custom component defining.

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Firefox可复制演示链接 https://jsfiddle.net/abolabo/3g7j519h/19/描述一下那个虫子 代码操作错误: 特质:[ { 类型:“按钮”, 文本:“点击我”, 全文:真实, 命令:(编辑器) => console.log(“特征命令”), }, ], 我本以为是<button>标签,但显示的是输入类型=button。 按钮内没有文字。没有命令运行。行为准则[X] 我同意遵守本项目的行为准则

artf

感谢@abolabo报告,这个问题其实已经在这里修复了,#3735

GJSBlock

谢谢你举报,@abolabo。 v0.17.25 的问题。自定义组件定义中的特性按钮。 似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队...

#37592021年9月8日作者 throne19864 个回答
3 个反应

未捕获的类型错误:未能在“节点”上执行“appendChild”:参数1不属于“节点”类型。

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome新版本可复制演示链接 https://codesandbox.io/s/grapejs-reactjs-forked-zqnqo?file=/src/Editor.js描述一下那个虫子 如何复现这个漏洞?只需将图片块拖放到画布上还可以在落地页面块中找到拖放自定义图片块到 Canvas Live demo : [https://codesandbox.io/s/grapejs-reactjs-forked-zqnqo?file=/src/Editor.js](url) 预期的行为是什么? 当用户丢弃自定义图片块、默认图片块,或者双击C...

throne1986

我已经解决了这个问题,方便以后参考 首先我移除了这个功能: editor.on(“component:add”, (model, argument) => { if (model.getName() === “Image”) { modal.setContent(ModalImages); } }); 我用这个功能替换了 编辑。Commands.add('open-assets', { run(editor, sender, opts = {}) { dispatch(se...

artf

当你运行“editor.command.run('open-assets')”时,你必须传递选项,比如 “''js editor.command.run('open-assets', { 目标:editor.getSelected(), }) ```

throne1986

@artf我解决了问题,问题是关闭问题,解决方案就是通过以下选项传递URL。 编辑。Commands.run(“open-assets”, { 目标:editor.getSelected() 网址:imageUrl }); 编辑。Commands.add(“open-assets”, { run(editor, sender, opts = {}) { dispatch(setIsOpen(true)); console.log(“imageUrl”,opts.url);...

#37532021年9月7日作者 migokcek3 个回答
0 个反应

当从任何地方复制文本时,样式管理器都无法正常工作。

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v92 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 当我从Microsoft Office、Word或任何网站获取任何文本时,它都会附带自己的CSS和font-color,而font-color属性对文本来说无法使用。 第二个bug是当我尝试更改字体大小时,它改变的是“文本框”的大小,而不是字体大小。 我试着添加!在StyleManager中很重要,但没用 ![grapesjsBug](https://user-images.githubusercontent.com/433...

artf

如果你粘贴一个带有自己内部风格的文本,你必须为每个粘贴的组件更换,因为它们的样式会覆盖父样式。

chirag0110

@artf ,即使我们也无法更改任何粘贴的组件。我已经从 lorem ipsum 网站添加了 lorem ipsum 文本。当我粘贴文本时,我 grapesJs 用 “P” 标签包裹文本,id=“i835ol”。 我无法更改“P”标签的样式。我也试过 GrapesJs 演示版。请查看附图。 ![图片](https://user-images.githubusercontent.com/20700428/150919741-3bad2eeb-d1fc-470f-adff-95...

GJSBlock

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

#37452021年9月2日作者 Light08152 个回答
0 个反应

Can not delete background-image:url of body after an import

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chromev93 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?导入以下代码现在尝试删除背景图片:URL不可能 预期的行为是什么? 点击正文,打开“打开样式管理器”,再打开“装饰”后,“背景”应该会显示带有图片的图层。然后应该可以删除这些图层。 目前的行为是什么? 点击正文,打开“打开样式管理器”,然后打开“装饰”,“背景”应表示带有该图片的图层。该图不显示,因此无法删除 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 不,不是行为准则 [X] 我同意遵守本项目的行...

artf

你好,感谢@Light0815报告,但我已经知道图层和导入CSS相关的bug,所以我把这个作为#1396的重复关闭

GJSBlock

谢谢你举报,@Light0815。 关于导入后无法删除背景图片:正体URL的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethi...

浏览所有主题