GrapesJS 问题

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

状态

排序

找到 466 个问题

🔍 components

#34482021年5月10日作者 rcloss2 个回答

0 个反应

style-manager 组件常规

向组件应用自定义类似乎没有效果

当某些条件未满足时，我会在组件上添加一个类，比如没有 href 集。我查看了源代码，看到了“nolink”类，但它没有把背景色设置为红色，检查元素时也看不到它，这就是我尝试添加它的方式，但当我用cc.getAll（）时，我看不到nolink类，所以我不确定问题出在哪里 'var cc = 编辑。Css作曲家; 'var nolink = 编辑器。SelectorManager.add（'nolink'）;' 'var rule = 编辑器。CssComposer.add（[无链接]）;' 'rule.set（'style'， { “背景色”：“红色” });` 我也试过'编辑器'。CssComposer.setRule（'.nol...

artf

我也试过编辑器。CssComposer.setRule（'.nolink'， {'background-color'：'red'}）;但这似乎也没用 'setRule' 是正确的 API，它能用，但它只创建规则，如果你想在 Canvas 上看到它，还得先把类添加到组件里（例如 'editor.getSelected（）.addClass（'nolink'）'）

GJSBlock

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

查看详情

#34472021年5月10日作者 lbmir4 个回答

2 个反应

组件增强提问文档 typescript

Javascripts are not working due to encoding issue

1 - 我复制了打字文本组件代码，而不是演示HTML代码; 2 - 并增加了allowScripts：1; 你可以在这里看到示例：http://bashworld.ru/demo.html 点击查看代码，我们会看到许多 JS 编码字符。我该如何解决这个问题？我需要解码所有 &， <， >， ' 字符，请参见下方剧本 ![哇哇]（https://user-images.githubusercontent.com/40471188/117637617-6788d500-b19b-11eb-9564-7dc8b12dd797.png）

Ju99ernaut

不建议使用 'allowScripts： 1'，无论如何，在你的情况下，为什么不直接拖入打字块呢？如果必须在 From 元素中包含它，可以用： '''html <div id=“gjs”> <div data-gjs-type=“typed”></div> </div> ```

Ju99ernaut

你应该正确设置存储设备 https://grapesjs.com/docs/modules/Storage.html#basic-configuration

lbmir

@artf 你能帮帮我吗？

查看详情

#34462021年5月9日作者 Spectrevuln-sketch4 个回答

0 个反应

style-manager 组件缺陷文档 typescript

Cannot Store Data Unexpected token '-'

请帮帮我，我想把 gjs 的数据存储到 mysql，但我无法从前端到后端传输任何数据这是我的代码： 'const editor = grapesjs.init（{ 容器：“#editor”， storageManager： { 类型：“远程”，参数：{}， // 用于请求的自定义值你的服务器端点 urlStore： 'http://example.com/store-webpage'， urlLoad： 'http://example.com/load-webpage'， contentTypeJson： true， setStepsBeforeSave： 1， }, blockManager： { 附录：“#blocks”...

Ju99ernaut

变量名不能包含 '-'，因此以下语法无效： “''js const { gjs-assets， gjs-components， gjs-css， gjs-html， gjs-styles } = req.body; ```

Spectrevuln-sketch

请帮帮我，我想把模板存到 MySQL，我该怎么做？

Ju99ernaut

遗憾的是，这可能超出 grapesjs 范围，但有些需要注意的另外，既然你在存储时看起来是在移除 gjs- 前缀，加载时也必须重新添加它。这里也有类似的方法，https://github.com/Ju99ernaut/gjs-api 但用于python和postgres。

查看详情

#34352021年5月6日作者 anlumo1 个回答

0 个反应

提问文档画布组件缺陷

Scrollable onStart/onEnd/updateTarget not Overridable

版本： 0.17.3 你能重现演示中的bug吗？[ ] 是的[X] 不预期的行为是什么？能够覆盖组件model.default.scrollable中的 onStart、onEnd 和 updateTarget，详见[文档]（https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js）。详细描述那个漏洞我创建了一个扩展 ComponentImage 的组件。内容不是静态图像，而是根据需要渲染，当目标尺寸变化时必须重新渲染。根据文档，我应该能在model.default.scrollable中定义onEnd，在调整大小完成后触发重新渲染（我不想在用户还...

GJSBlock

谢谢你举报，@anlumo。 Scrollable onStart/onEnd/updateTarget not Overridable 的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供...

查看详情

#34222021年4月29日作者 Asifislam1104 个回答

0 个反应

组件提问常规

我们如何从文本组件“在这里插入你的文本”中移除默认文本内容？

我想像占位符一样，移除文本组件中的默认文本。每次拖动文本组件时，我们都需要手动移除默认文本。

theSC0RP

嘿，@Asifislam110，我不知道这是不是最好的解决方案，但这是我能想到的一个。

Asifislam110

@theSC0RP编辑器加载时，它会把文本从所有文本组件中移除。在编辑器中插入文本框时，用户开始输入时“在此插入您的文本”这句话应该会自动消失。目前，你必须自己删除文本。

theSC0RP

哦，我错了！我以为你不想让文本组件在画布里有任何内容。针对你的疑问，我猜你可以做类似选择组件时检查它是不是文本组件，在视图里你会看到“el”，如果是“插入你的文本”，可以把innerText改成“'”

查看详情

#34212021年4月29日作者 ltenti-eventboost4 个回答

2 个反应

style-manager 提问组件

How to remove class selector css rule

我用 componentFirst 设置为 true，让用户对他们选择的组件应用所需的样式。选择一个应用特定组件类型 CSS 类的组件，并点击“同步”按钮，会使选择器从组件 ID 切换到相应的 CSS 类。现在我找不到办法回去丢弃那个以组件类为选择器的 CSS 规则，因此该组件的每个新实例样式都一样。谢谢你的帮助！

ltenti-eventboost

这很合理，现在我只需要想办法把这个功能添加到我的构建器里。谢谢你，@Ju99ernaut！

bgrand-ch

你好，对于未来的问题或技术问题（非漏洞），GitHub的[讨论]（https://github.com/artf/grapesjs/discussions）标签是最佳选择。如果问题已解决，请关闭，或在[讨论]（https://github.com/artf/grapesjs/discussions）->[问答]（https://github.com/artf/grapesjs/discussions/categories/q-a）类别写一条详细的新消息（并关闭本期）。...

artf

你好，@ltenti-eventboost，我不太确定我是否准确理解你的问题出在哪里。当你启用“componentFirst”编辑时，编辑器会对组件特定的CSS规则进行样式更改（例如'#cmp-id { color： red }'）。点击“同步”按钮后，所有样式都会被移到当前的类选择器，组件专用规则内的样式会被移除，'.selected-class { color： red } #cmp-id {}'。所以，从你描述的来看，我觉得挺合理的，但也许我漏掉了什么。

查看详情

#34202021年4月28日作者 sanchit362 个回答

0 个反应

提问 style-manager 组件 typescript

[紧急!! 问题：如何在 reactjs 项目中实现 LocalStorage？？

我正在尝试在 Reactjs 应用中实现 localstorage，但不知为何它没有在 localstorage 中存储数据 “JavaScript useEffect（（） => { const templateComponent = JSON.parse（ localStorage.getItem（“gjs-components”） ); console.log（模板组件）; const templateStyle = JSON.parse（localStorage.getItem（“gjs-style”））; console.log（模板样式）; const editor = Grapesjs.init（{ 容器：“#edi...

artf

本地storageManager会帮你完成所有工作，所以你不需要做现在那些手动操作。所以保留storageManager选项，把剩下的都删掉。附言：使用useEffect要小心，添加一个空数组作为依赖，否则它会在每次渲染时调用初始化......

GJSBlock

谢谢你举报，@sanchit36。关于[紧急!!的好问题问题：如何在 reactjs 项目中实现 LocalStorage？？.推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（）...

查看详情

#34172021年4月27日作者 NagarRahul2 个回答

1 个反应

组件提问 typescript

FEAT：地图组件是如何运作的？我们如何创建天气组件并渲染？

能否详细说明地图组件在拖曳后是如何渲染的？我们如何为天气创建一个新的组件，并且它如何像地图组件一样渲染？ @artf

theSC0RP

如果你还没看过，可以看看以下内容，了解地图组件的工作原理：[地图分量模型]（https://github.com/artf/grapesjs/blob/dev/src/domcomponents/model/ComponentMap.js）[地图组件视图]（https://github.com/artf/grapesjs/blob/dev/src/domcomponents/view/ComponentMapView.js）

GJSBlock

谢谢你举报，@NagarRahul。关于FEAT：地图组件是如何工作的，这个问题很棒。我们如何创建天气组件并渲染它？。推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'so...

查看详情

#34162021年4月27日作者 ghost2 个回答

0 个反应

组件缺陷提问 typescript

0.15.10 - setAttribute - is not a valid attribute name

你好！我知道这是这里报告的 bug，#2029，但现在我无法从'0.15.10'更新到包含解决方案的版本。你知道我现在设置组件时有什么解决办法吗？我用的是 VueJS 搭配 GrapesJS。以下是我尝试设置组件的方法。 'this.grapeEditor.setComponents（myHtml）;' 但“setAttribute”会跳出“不是有效的属性名称”，而且内容不会显示。提前感谢大家。

artf

抱歉，我帮不上这么老的版本。为什么你不能更新？？

GJSBlock

谢谢你举报，@ghost。 0.15.10 - setAttribute - 不是有效属性名称的问题，似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例（CodeSandbox）—...

查看详情

#34142021年4月26日作者 sidh013 个回答

1 个反应

组件常规

Component model is not reset when create new drag

从右面板拖动组件时，组件模型没有设置成默认值，而是保留之前添加组件的值 ![图片]（https://user-images.githubusercontent.com/37957105/116101026-1d97ed80-a6cb-11eb-85b5-e2f4d896cdc7.png） ![图片]（https://user-images.githubusercontent.com/37957105/116100999-17097600-a6cb-11eb-885d-3c09ef3b13c6.png）

sidh01

我已经解决了这个问题，问题是当我们设置模型属性时，我需要用深度克隆来做数组或对象

artf

你好@sidh01这肯定是你这边的问题，如果你能制作出可复现的演示，我们可以尽力帮你。

GJSBlock

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

查看详情

GrapesJS 问题

浏览所有主题