GrapesJS 问题

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

状态

排序

找到 466 个问题

🔍 components

#33262021年3月9日作者 devtechk3 个回答

2 个反应

style-manager 组件提问画布

Canvas style css

大家好，与其用这种方式在首页造型...... 有可能在Canvas中使用SCSS文件吗？canvas { style：['FILE.SCSS'] } 还是用一个初始化CSS让它更干净？谢谢！ ' myComponent.append（<style> 正体 { 背景：RGB（204,204,204）; } .footer { 位置：绝对; 底部：5毫米; 宽度：自动; 左侧：5毫米; 右侧：5毫米; } .footer-container { 填充：7像素88像素 7像素96像素; } .footer-text：nth-child（2） { float：right; } .footer-text { 字体大小：11px; } .l...

artf

如果你不想用文件，可以用 [canvasCSS 选项]（https://github.com/artf/grapesjs/blob/da98f1905c6b9c691793685a7f4e21f109a8843e/src/editor/config/config.js#L77）。

devtechk

非常感谢！这个配置文件对我帮助很大！

GJSBlock

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

查看详情

#33252021年3月9日作者 mmotov4 个回答

0 个反应

缺陷组件 keyboard typescript

JSON.stringify(this.editor.getComponents()) Error

版本： 0.16.44 你好！我有页面的远程存储，最近在保存页面时遇到了一个问题，'JSON.stringify（editor.getComponents（）'开始弹出错误，'Uncaught TypeError： e[M].getId is not a function'。我检查了页面已保存的JSON表示，发现它在这部分失败了我不知道“__symbol”键的用途，但没有它，一切都正常。这个问题只在少数几页出现，但我担心其他页面也会再次出现。

yucomds

这里也是同样的错误......你有解决办法吗？ [编辑]目前降级似乎是唯一的解决办法

josfh2005

这里也有同样的问题，如果我在加载编辑器前先预处理组件并移除那个属性（__symbol），模板就能正常工作。现在有没有办法暂时禁用这些符号@artf？

artf

是的，不幸的是，之前的 grapesjs 版本有个bug，导致符号不自愿生成。在当前版本中，这个bug已经修复，符号被禁用了，但不幸的是，如果你尝试加载一个包含已保存符号引用的组件（由漏洞创建的），这个问题仍然会发生。我会在下一个版本中为这个问题添加补丁，目前我会听Josè的建议，在加载编辑器前删除所有 __symbol 引用。

查看详情

#33222021年3月7日作者 Andrew-Chen-Wang1 个回答

0 个反应

提问组件 typescript

How to update built-in component's traits?

NVM 你必须在插件里加组件覆盖。

GJSBlock

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

查看详情

#33172021年3月5日作者 martijnc3 个回答

0 个反应

增强组件提问

Add support for promises to custom RTE API

你想给GrapesJS添加什么？支持基于承诺的 API 的富文本编辑器。详细描述你的功能需求详细 CKEditor5 的“Editor.create”和“Editor.destroy”方法返回一个“承诺”，当编辑器完全创建或销毁时才会解决。这会导致销毁编辑器（完成组件编辑）时出现问题，因为 GrapesJS 在 'Editor.destroy' 承诺尚未解决之前就同步了修改到模型，导致 CKEditor HTML 写入模型。作为一个变通方法，你可以在承诺解决后再次同步内容，但如果API支持承诺会更干净。我们可以以向后兼容的方式添加这一点，比如检查RTE的“使能”和“禁用”方法的返回值是否可，如果是，则等待承诺解析后再继续。...

artf

是的，说得通，我建议你先试着让ComponentTextView中的启用/禁用方法默认异步而不破坏系统，但确认是否可行总是个选项。

artf

这本应已经是可行的。

GJSBlock

谢谢你举报，@martijnc。关于FEAT：支持自定义RTE API的承诺，真是太棒了！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*...

查看详情

#33162021年3月5日作者 am1rb4 个回答

1 个反应

组件提问缺陷文档 typescript

The editor does not remove the dead script blocks

版本： 0.16.34 你能重现演示中的bug吗？ [ ] 是的 [x ] 不据我了解，导入代码对话框跳过了所有HTML脚本，所以我无法在演示中重现这个问题预期的行为是什么？编辑者必须先移除失效脚本块，才能在生成的HTML末尾添加新的脚本块详细描述那个漏洞* 我在项目中用脚本（https://grapesjs.com/docs/modules/Components-js.html）定义了一个组件。当我将这个组件添加到编辑器并保存模板时，编辑器生成 HTML，并在正文末尾附加一个脚本块以启动相关组件。输出的HTML大致是这样的： '''html <head>  <script>/ 附加的脚...

Ju99ernaut

我无法复现这个，也许你能提供更多关于自定义组件的信息，无论如何我怀疑这是存储相关的问题。你是先存储然后加载生成的HTML页面吗？

Andrew-Chen-Wang

通常内联脚本会放在正文底部。试着把它放那里？

am1rb

我自己不添加任何内容。编辑器会在生成的HTML末尾添加与组件相关的脚本，并添加一个新的脚本标签。请查看这个文件： https://github.com/artf/grapesjs/blob/dev/src/editor/model/Editor.js#L513 我觉得这里可能有问题。编辑器会添加新的脚本块，但不会移除旧的。

查看详情

#33092021年3月4日作者 jcamejo4 个回答

0 个反应

组件 typescript 常规

TextNodes interfere when changing content on element

版本： 0.16.44 你好@artf 我有一个自定义方块，带有自定义按钮组件，内容和这个类似。 ` <a data-gjs-type=“custom_button” class=“btn btn-1” href=“”>Click here</a>' 此外，我添加了一个文本特性来更改按钮内容，但在这个特定情况下，我不想使用编辑器RTE。 <img width=“286” alt=“image” src=“https://user-images.githubusercontent.com/1976679/109966677-d3a91180-7cf0-11eb-8463-e28b8de806c2.png”> 当我更改数值时，第一次会...

artf

你好，Juan，谢谢你的报告，你能给我演示一下你的文本特性是怎么工作的吗？如果你用这种方式更新组件 'component.components（e.target.value）'，我预计它应该能正常工作

jcamejo

这是我的特质我已经改成现在它不用覆盖更新内容或渲染子节点，谢谢！我绝不会得出使用“组件”方法的结论。现在我不喜欢文本节点 😅 我觉得除非你还有其他改进点，否则我们可以结束这个问题。谢谢！

artf

我觉得你不需要这个“target.set（'content'， value）;”。其他的都很好 👍

查看详情

#32982021年3月1日作者 neon123452 个回答

1 个反应

组件常规

Hide component labels while editing text

对于放置在页面顶部的文本，组件标签在编辑时可能会重叠并隐藏文本。另外，标签在不在顶部时可能会和文本编辑工具重叠。编辑文本时隐藏标签可以避免这种情况。

RutujaBadbe

你可以用 badgable ： false 隐藏标签 https://grapesjs.com/docs/api/components.html#parameters-3

GJSBlock

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

查看详情

#32952021年3月1日作者 marcepoblet4 个回答

0 个反应

提问组件缺陷画布 typescript

BUG（v0.16.41）：带有可拖拽属性的按钮组件无法正常工作

版本： v0.16.41 你能重现演示中的bug吗？ [ ] 是的 [ ] 不预期的行为是什么？当我们有一个属性为 data-gjs-draggable 的 false 按钮时，这个按钮不应在画布中被拖动。详细描述那个漏洞步骤将带有可拖拽属性的按钮组件设置为 false将按钮拖入其他组件内拖动按钮目前的行为是什么？步骤将带有可拖拽属性的按钮组件设置为 false将按钮拖入其他组件内按钮不应拖动你能附上截图、截屏或实时演示吗？** [ ] 是的（附上视频） https://user-images.githubusercontent.com/64096863/109490335-da245880-7a66-11eb-81...

artf

我猜你做错了什么，你是怎么创建这些组件及其属性的？你甚至不应该在检查员里看到这些属性。

marcepoblet

@artf 我们的准则中没有做任何更改。唯一的区别是我们更新了GrapesJs的版本。之前我用的是v0.16.18版本，运行正常，但现在我们把GrapesJs更新到v0.16.41后，按钮功能就不行了。

marcepoblet

我们用以下方式设置属性： editor.getSelected（）.attributes.attributes[“data-gjs-editable”] = 'false' editor.getSelected（）.attributes.attributes[“data-gjs-copyable”] = 'false' editor.getSelected（）.attributes.attributes[“data-gjs-droppable”] = 'false' edi...

查看详情

#32922021年2月26日作者 sudiptochoudhury3 个回答

1 个反应

提问 style-manager 组件缺陷增强

每个组件在保存前有没有一个事件，组件可以监听？

非常感谢你提供这个图书馆。背景：我正在构建一个编辑器，打算从我之前开发并在应用中使用的现有Vuejs组件中定义大部分组件。这些组件大多基于UI的简单和复杂组件。例如，我有简单的vuejs组件，分别叫su-form、su-field、su-label、su-input、su-radios、su-buttons、su-validations;复杂的vuejs组件则使用su-login-form、su-registration-form等简单组件。正如你可能猜到的，su-form或su-field等组件都有插槽，我会添加其他组件，以创建符合业务场景的实用组件。例如，我在su-form的插槽中插入su-input、su-label、su...

Ju99ernaut

我不确定每个组件是否都有这样的钩子，但你可以尝试利用组件的“toHtml”属性。这个问题已经在别处讨论过了，所以你可以在期刊中搜索，因为有不少。

artf

是的，你可以用自定义的“toHTML”/“toJSON”函数（模型中）来定义组件，以便自定义它们的输出

GJSBlock

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

查看详情

#32892021年2月23日作者 bgrand-ch4 个回答

2 个反应

style-manager 缺陷提问组件文档

Components have lost their styles

版本： 0.16.41 你能重现演示中的bug吗？ [X] 是的 [ ] 不预期的行为是什么？ 1）将选中的父组件（容器）复制到剪贴板。 2）从剪贴板中选定的父组件（容器）粘贴到同一页面或其他页面。 3）所有组件都保留ID样式和内联样式。目前的行为是什么？ 1）将选中的父组件（容器）复制到剪贴板。 2）从剪贴板中选定的父组件（容器）粘贴到同一页面或其他页面。 3）组件失去了ID样式，但内联样式未丢失。组件没有重新生成的样式ID，而是使用相同的之前ID，但带有“-2”。你能附上截图、截屏或实时演示吗？ [X] 是的（附上） [ ] 不 https://jsfiddle.net/bgrandch/71yuz26p/33/ 根据...

artf

那是因为你用你的版本更新了原始命令（错误地）。确实，如果我把你的插件从演示中移除，一切都会正常运行。请检查原始的复制粘贴命令，你应该在粘贴前克隆组件，所以你的实现可能无法正常工作。

artf

只要检查原始命令 https://github.com/artf/grapesjs/blob/dev/src/commands/view/CopyComponent.js https://github.com/artf/grapesjs/blob/dev/src/commands/view/PasteComponent.js

bgrand-ch

@artf 谢谢你的回答。请提供链接、示例或更多解释？😅

查看详情

GrapesJS 问题

浏览所有主题