GrapesJS 问题

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

状态

排序

找到 3,464 个问题

#31372020年11月12日作者 Asha15973 个回答

0 个反应

当我选择某个特定元素时，我没有看到它的样式。这个问题只发生在某些元素上。

未获得所选元素的样式这是我的代码， const model = 编辑器。StyleManager.getModelToStyle（component）; let styleObject = model.getStyle（）; console.log（“样式”，styleObject）版本： 0.14.49 你能重现演示中的bug吗？ [X] 是的 [ ] 不预期的行为是什么？当选中元素时，我应该会看到该元素的样式。目前的行为是什么？当选中元素时，我没有得到任何样式，只有空的对象。你能附上截图、截屏或实时演示吗？ [X] 是的（附上） [ ] 不这是实际和预期结果的截图，真实 ![截图，2020-11-12 16-5...

artf

首先，你需要升级你的 Grapesjs 版本（你用的是两年前的版本），然后你还得提供一个问题的实时演示。

no-response[bot]

由于我们请求原作者提供更多信息未获回应，本期已自动关闭。仅凭当前期刊中的信息，我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案，请随时联系我们，以便我们进一步调查。

GJSBlock

谢谢你举报，@Asha1597。当我选择某个特定元素时，我无法获得它的样式。这个问题只发生在某些元素上。似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例（CodeSandb...

查看详情

#31362020年11月11日作者 vijaycreatise4 个回答

2 个反应

提问文档 keyboard typescript

Create one more key in JSON

{“type”： “text”，“状态”：“悬停”，“内容”：“请在此插入您的文本”，“属性”：{“id”： “ixx2” },“activeOnRender”： 0，“open”：假 } 在 JSON 里我想添加带有对象的新键。示例 data 键，这里会有自定义特性。我想添加一个新的对象，可以从中获取数据并填充输出。我能做到吗？下面是我想要的样件。有人能帮我解答一下，怎么才能实现这个目标吗？ { “type”： “text”， “状态”：“悬停”， “内容”：“插入你的文本在这里”， “属性”：{ “id”：“ixx2” }, “数据”：{ “url”：“https://something.com”， “refresh_rate...

longdoan7421

抱歉我误解了你的问题，所以我之前的评论不相关。为了实现你的愿望，你需要创建自己的性状类型[（docs）]（https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type）和组件类型[（docs）]（https://grapesjs.com/docs/modules/Components.html#define-custom-component-type）。有更简单的方法，但它不能把所有自定义数据保存...

longdoan7421

我不太明白你的问题。但如果你为组件模型设置了任何自定义属性（除了一些保留键，比如“组件”、“样式”等），例如： 'component.set（'customTraits'， yourCustomTraits）;'。它会以JSON数据形式存在。

vijaycreatise

我试过这样做，但没用。我想在 JSON 中添加 data 键和对象，用户选择表单时可以输入 API URL。你能帮我检查一下我做得对吗？

查看详情

#31352020年11月11日作者 archerbj4 个回答

3 个反应

缺陷提问组件文档依赖

How to easily override existing component ?

例如，我想在默认视频组件上添加双击事件处理程序来打开资产管理器。我的基本想法是获取视频组件的视图定义，并添加“事件”+处理器。最后，把它调回视频部分。不幸的是，这一想法在第一步就失败了。'v.View（）' 会给我一个错误我刚接触这个项目，对Backbone.js几乎一无所知。你能给我一些建议吗？

Joshmamroud

@archerbj这里有你想要的演示：https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js 你应该把功能绑定在“组件类型”本身，而不是试图找到该组件的所有实例并在某个更改时添加。为此，创建一个新的“组件类型”，扩展“视频”类型，然后在视图中添加“dblclick”事件处理程序。一旦有了这个，你就可以创建一个使用新组件类型的块。这里有一些关于[如何扩展组件类型]（https://grapesjs.com/doc...

archerbj

@archerbj这里有你想要的演示：https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js你希望把功能绑定到“组件类型”本身，而不是试图找到该组件的所有实例并在更改时添加。为此，创建一个新的“组件类型”，扩展“视频”类型，然后在视图中添加“dblclick”事件处理程序。一旦有了这个，你就可以创建一个使用新组件类型的块。这里有一些关于[如何扩展组件类型]（https://grapesjs.com/docs/mo...

abulka

@Joshmamroud 谢谢你举这个例子。我能找到的唯一一个使用文档中提到的“扩展”功能的例子是你的。你的例子非常简单且禅意——但它只是展示了给视频组件添加“dblclick”处理程序，并没有显示添加额外的组件属性或属性和特征。你能解释一下或者举个例子吗？因为我很难理解如何使用“extend”——正如我在#3060中提到的那样。

查看详情

#31342020年11月11日作者 josfh20054 个回答

0 个反应

提问组件缺陷画布

当我尝试拖动最后几个部分的元素时，画布滚动到页面顶部

版本： 0.16.27 你能重现演示中的bug吗？ [X] 是的 [ ] 不预期的行为是什么？当我尝试拖动组件时，画布不应该滚动到页面顶部。详细描述那个漏洞** 每当我尝试拖动页面最后部分的组件时，画布就会滚动到顶部。有时候第一次就会出现，但有时候总是这样，可能和元件类型有关。

artf

你好，José，你能提供你问题的截屏吗？我试过拖动模板的最后一部分，但对我来说一切正常

josfh2005

你好@artf，你可以在这里看看，https://recordit.co/vn1ZVN6J1N 不是在各个部分，任何元素都会这样，但只有第一次尝试拖动时才会。

artf

啊，明白了，只是第一次，我现在也👍拿到了

查看详情

#31332020年11月11日作者 BaskarMN1 个回答

0 个反应

文档提问常规

Getting started example in React application

Please could anyone guide me on how to run the basic example given in the GrapesJS website using React.. PLEASE HELP

GJSBlock

谢谢你举报，@BaskarMN。关于React应用入门示例的好问题。GrapesJS 推荐的方法是使用事件驱动 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））...

查看详情

#31322020年11月11日作者 tranthanhhoa1 个回答

0 个反应

typescript 常规

Trait with [type ="number"] not working

版本： 0.16.27 摘要： [type =“number”]的性状不起作用繁殖步骤：试着输入类似“abc”这样的词，代表一个类型是“number”的特征。意料之中：不要接受这根绳子真实：仍然接受这条绳子

GJSBlock

谢谢你举报，@tranthanhhoa。感谢你分享关于带[type =“number”]的特质不起作用的报告。为了帮助团队调查并优先排序：请提供：一个最小可复现的例子（CodeSandbox/JSFiddle）你的GrapesJS版本号浏览器和操作系统信息浏览器控制台的任何错误信息重现问题的步骤最有帮助的是什么：简约代码示例（不是你整个项目）屏幕录制或截图显示问题明确区分预期行为与实际行为你正在使用的GrapesJS配置有了这些细节，维护者可以更快...

查看详情

#31312020年11月11日作者 Joshmamroud4 个回答

0 个反应

提问组件缺陷 style-manager typescript

将纯文本粘贴到文本组件中，会为粘贴的文本添加 <font /> 封装器

版本： 0.16.27 你能重现演示中的bug吗？ [] 是的 [X] 不预期的行为是什么？将粘贴文本为纯文本（文本节点），不像Grapes JS在</>元素中进行打包。目前的行为是什么？当我把纯文本粘贴到空文本元素时，编辑器会用<font />元素包裹它。在粘贴文本之前 ![Screenshot1]（https://user-images.githubusercontent.com/5224187/98757808-4d606c80-239b-11eb-8194-3b854dd8ac97.png）在文本粘贴（以纯文本形式）之后 ![Screenshot2]（https://user-images.githubuser...

Joshmamroud

@artf你知道这是在组件、RTE还是其他地方发生的吗？你能指点我正确的方向吗？如果有人能帮忙，我将非常感激。谢谢！

artf

我没法复现，但我看到你用的是自定义的“dm-text”组件，这可能是原因？！

Joshmamroud

@artf 我不这么认为。以下是 dm-text 组件类型的配置 “JavaScript” { 扩展：“文本”，型号：{ 默认值：{ 名称：“文本”，特征：[]，可编辑：正确，可掉落：错误， textable：确实如此，风格：{ 填充：“10像素”，宽度：“100%”，高度：“自动” }, 可造型：[ “背景色”， “页分内”， “颜色”， “文本对齐” “font-size”， “字体家族”， “字体粗细”， “线高”， “边框宽度”， “边框颜色”， “边...

查看详情

#31302020年11月10日作者 jenter4 个回答

2 个反应

提问性能画布

标准方法：对HTML工具栏和徽章进行轻微重构

版本： '0.15.10' 这个问题旨在验证是否有合适的方法通过自定义插件扩展当前 https://github.com/artf/grapesjs/blob/master/src/canvas/view/CanvasView.js。我们特别回顾了该文件中的“render（）”方法，以稍微修改HTML以结合工具栏和徽章，实现该UI设计： ![图片]（https://user-images.githubusercontent.com/1368216/98736636-12e2d980-2373-11eb-8871-7ac45dcdae3e.png）过去，我成功地用编辑器扩展了命令。Commands.extend（'select-c...

artf

你好@jenter，好问题。不幸的是，我从未真正关注过画布扩展或其界面元素的可能性，所以肯定没有绝对正确的做法。如果有人愿意提出解决方案，我很乐意帮你评估。

jenter

@artf我会审阅一些提案/想法并加入这个帖子。

artf

太好了，谢谢你，Jason

查看详情

#31292020年11月10日作者 lebonsavane2 个回答

0 个反应

组件缺陷 typescript

错误：需要Babel “^7.0.0-0”，但加载时为“6.26.3”

我尝试安装新版本，但在package.json里什么都没动。它在一个叫“blocks avancées”的插件里 grapesJs 但我运行代码时每个文件夹都有这个问题 " 错误 ../src/dom_components/view/ComponentFusionView.js 模块构建失败：错误：需要Babel “^7.0.0-0”，但加载时是“6.26.3”。如果你确定自己有兼容的@babel/core版本，很可能是构建过程中加载了错误版本 "

artf

ComponentFusionView？那肯定不是主 grapesjs 核心的，我们没有那个组件......很可能你用的是某种修改过的版本，这可能是导致错误的原因

GJSBlock

谢谢你举报，@lebonsavane。错误 Error：需要 Babel “^7.0.0-0”，但加载时为“6.26.3”。如果你确定自己有兼容的@babel/核心版本，很可能是构建过程中加载了错误版本发生在组件在组件生命周期完全初始化前尝试访问属性时。这是GrapesJS中常见的竞争条件。立即解决办法：如果你控制代码，可以用空检查包裹调用： “JavaScript if （component && typeof component.method === 'func...

查看详情

#31282020年11月10日作者 sprklinginfo2 个回答

0 个反应

增强提问组件 typescript

专长：在鼠标点击的位置放置一个组件

你想给GrapesJS添加什么？当组件被丢弃时，保持鼠标点击的位置。详细描述你的功能需求详细我开始玩一些基础的积木/组件。如果我拖拽一个组件，比如简单的文本输入，看起来它们会通过一个隐形网格布局吸附到最后一个激活的组件上。有没有可能某个组件只是停留在鼠标点击的位置？即使我试图把组件拖到别处，它也不会移动到我想要的位置。

sprklinginfo

发现已经通过使用“dragMode： 'absolute'实现了。谢谢。

GJSBlock

谢谢你举报，@sprklinginfo。关于FEAT：在鼠标点击的位置放置一个组件，这是个很棒的建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“ch...

查看详情

GrapesJS 问题

浏览所有主题