GrapesJS 问题

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

状态

排序

找到 3,464 个问题

#25152020年1月19日作者 ikenderham3 个回答

9 个反应

每页只允许一个 h1 标签

你好有没有可能每页只允许一个h1标签？我需要确保我们只能拖曳一个h1标签到画布里。该怎么办？:-)

artf

@pouyamiralayi感谢你一如既往的大力支持 ❤️ 顺便说一句，@ikenderham记住这一点 “''js editor.getComponents（）.filter（comp => comp.get（'tagName'） == tag）.length > 1

pouyamiralayi

@ikenderham 干杯！

ikenderham

你真好！我该如何感谢你呢？？非常感谢！Khdafesممنون 我明天会在工作中试试这个例子。我刚在GitHub上跟着你！

查看详情

#25142020年1月19日作者 ghost3 个回答

14 个反应

：如何将设备从下拉菜单切换到图标

我正试图按照新闻通讯模板中的示例，用设备下拉菜单替换，但不行。

Phil-B

以上示例在0.17.28版本中对我来说不起作用（我猜API已经变了）。这个方法有效：

umerrinayat

@petervandeput https://github.com/artf/grapesjs/issues/1507#issuecomment-496280105 grapesjsinit之后。 “''// 在面板栏添加设备图标 editor.getConfig().showDevices = 0;editor.Panels.addPanel({ id: "devices-c" }).get("buttons").add([ { id： “set-device-deskt...

artf

你也应该创建这些命令 https://github.com/artf/grapesjs-preset-newsletter/blob/04f1eb21c1ae45f8d2b2912323e79354d8e72f18/src/commands.js#L30-L44

查看详情

#25132020年1月17日作者 msantore1 个回答

1 个反应

附加到嵌套组件上

我用component.find（）在大量HTML内容中搜索嵌套组件，以便添加字段集标签，这样我就能在它后面添加组件。Component.find 定位了该组件，如console.log所示，但尝试 .append 或使用 .components 注入内容时，会出现控制台错误：fieldSet.append 不是函数。目标是利用 Traits 在第一个 fieldset 之后的表单中注入 HTML 的 Java_Stack 变量 'questionFieldSet'。如果我用 editor.getSelected（）.append，HTML 会注入，但按预期的位置错误。我需要在嵌套组件中深度注入，而 .find（）或 .c...

msantore

我找到了答案！只是需要具体说明一个阵列位置：-）使用'component.find（'fieldset'）后，务必设置数组位置 'fieldSet[0].append（questionFieldSet）;'

查看详情

#25122020年1月16日作者 eyesurewould2 个回答

2 个反应

GrapesJS 在 VueJS 应用中的应用

我正在构建一个 VueJS 应用，想在应用内使用 GrapesJS（我并不是想在 GrapesJS 里用 VueJS）。我搜索并阅读了现有的问题，但到目前为止还没看到任何关于如何在VueJS应用中使用GrapesJS的示例（除非我误解了这些例子）。感谢任何建议！

pouyamiralayi

嗨，@eyesurewould，看看[#2465]（https://github.com/artf/grapesjs/issues/2465#issuecomment-568466490）干杯！

eyesurewould

@pouyamiralayi 谢谢！

查看详情

#25112020年1月16日作者 ikenderham3 个回答

1 个反应

选择元素时如何打开扇区？

大家好我该如何打开像 General 这样的选择器，同时选择元素？我是JavaScript新手，但我尝试过类似的东西。 “''js editor.on（'component：selected'， function（component） { if（component.attributes.tagName == 'div'） { const styleManager = 编辑器。风格经理; styleManager.getSector（'General'，{ 开启：真， }); } }); ``` 我到底哪里做错了？谢谢你的帮助

artf

@ikenderham你快到了 “''js 编辑。StyleManager.getSector（'general'）.set（{ open： true }） ```

simplecommerce

我想你可以在源代码中看到一个可行的例子。 https://github.com/artf/grapesjs-preset-webpage/blob/6306f45d9de77b5b60f72679717e10e6081e81be/src/panels/index.js 在最底下。

ikenderham

你能举个例子吗？如果我点击一个DIV，需要打开通用，或者点击H1时，我需要打开“排版”？非常感谢，我是新手。

查看详情

#25102020年1月15日作者 simplecommerce3 个回答

3 个反应

：如何在图片上添加链接？

你好，有个快速问题。我有一张图片，想加个链接。使用模型时，在图片上添加链接最简单的方法是什么？我尝试使用“model.replaceWith”，但问题是如果我在图片上添加样式，然后调用“model.replaceWith”，样式就会被移除。有没有更好的方法可以实现这一点？谢谢！

simplecommerce

好的，我通过以下操作让它工作起来了：我不知道这是不是好方法，感谢任何反馈。

pouyamiralayi

你好@simplecommerce！干杯！

simplecommerce

嗨，@simplecommerce！谢！你好，@pouyamiralayi，谢谢回复。我不是说创建新组件，我的意思是简单地用链接（a）包裹渲染的组件模型（图片）来替换画布中的模型，同时保留样式。我粘贴的示例代码正是这样做的。例如：在画布上添加图像。选择图片，添加固定宽度、高度和边界。点击工具栏图标按钮添加链接。第三步，应该用（a）标签包裹所选图片，同时保留图片样式。这就是我想复现的。不过还是谢谢你的回复！

查看详情

#25082020年1月14日作者 alexiswbr3 个回答

1 个反应

缺陷

在最终 HTML 文本组件中添加的可拖拽属性

这个漏洞也出现在在线演示中：https://grapesjs.com/demo.html在页面上添加文本块，开始输入并按回车键，形成多行分隔。取消选择该块。双击该块重新开始编辑。现在如果你点击“查看代码”按钮，你会看到文本块内的HTML节点有一些“draggable=”true“属性。这总是在第三步发生。第一次编辑文本并添加断行时，只要你不想以后再编辑区块，一切都没问题。问题是，在网站最终显示的 HTML 中，这些属性依然存在。你无法选择任何东西，因为导航员会解释可拖拽属性。是的，我会分别保存“html”和“组件”两个我觉得这像是个bug，或者我误解了别的什么 ![draggable-html-bug-1]（https:...

artf

好的，我会试着去看看

pouyamiralayi

@alexiswbr使用下面的摘要，'div' 将变成 'br''，作为预期的行为：

obrazkow

我用这种方式防止被转换成组件，同时保留原始 html。只需覆盖你需要的组件，比如“文本”或创建新组件即可。也许这不是个好办法，但确实有效:)

查看详情

#25072020年1月13日作者 ghost2 个回答

0 个反应

需要更多信息

默认字体大小单位和值

嗨我正在一个项目中使用grapesjs，项目处处使用比例缩放。根据你的建议，我现在可以默认字体大小选择器为“他们”，并让“他们”成为唯一的选项。 editor.on('load', function () { const styleManager = editor.StyleManager; 强制字体大小变为EM const fontSize = styleManager.getProperty('typography', 'font-size'); fontSize.set（'units'， [“em”]）; fontSize.set（'unit'， “em”）; fontSize.set（“step”，0.1）; fontS...

artf

你能制作一个可复现的演示吗？

no-response[bot]

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

查看详情

#25062020年1月13日作者 andrewryan19063 个回答

1 个反应

无法让自定义组件可悬浮/可选/可标记

我用的是GrapesJs配合Angular，并用Angular组件来扩展功能。所以我的模板长这样：这些方法都运行良好;我已经把主控组件添加到了设计器里，组件会显示在图层设计器里，我甚至可以毫无问题地更改特征。一切都像应有的那样渲染。然而;虽然我可以选择我的文本组件并看到徽章，但我无法选择 rs-wc-custom-component 或 rs-wc-menu。当我点击物品时，没有蓝色矩形，也没有显示徽章;我唯一能选择/更改它们的方式是通过左侧的图层面板。我需要做些什么才能让这些内容可以选择？

andrewryan1906

所以，我最终选择使用Angular元素，但没有将元素编译成网页组件（想避免额外的复杂性）。这让我不用更换DOM元素，所以GrapesJS编辑器表现得很顺畅。没有问题了。谢谢！安德鲁

andrewryan1906

这可能会有帮助。作为处理元素的一部分，我正在临时用我的Angular元素替换它......所以，在渲染完 rs-wc-custom-component 标签后，我等 1 毫秒生成一个动态 Angular 组件，然后用我的动态 Angular 组件替换 rs-wc-custom-component。会不会是这个问题？

artf

作为处理元素的一部分，我正在临时用我的角元素替换它......所以，在渲染完 rs-wc-custom-component 标签后，我等 1 毫秒生成一个动态 Angular 组件，然后用我的动态 Angular 组件替换 rs-wc-custom-component。从编辑的角度来看，这确实是主要问题。当GrapesJS解析元素时，它会把组件模型附加到DOM上，所以当你尝试与它们交互时，编辑器实际上会使用他们的模型。但我不太清楚你是如何用图层（图层使用的是相同的组件模...

查看详情

#25052020年1月12日作者 vfxdude3 个回答

1 个反应