GrapesJS 问题

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

状态

排序

找到 466 个问题

🔍 components

#32882021年2月23日作者 ilsantuzzo2 个回答

0 个反应

组件提问 typescript

Edit a clone without affect the cloned components

我发现克隆和所有克隆组件都有镜像编辑功能。有没有办法避免这种情况？ ![GJS]（https://user-images.githubusercontent.com/5839445/108843429-f6457700-75da-11eb-91d7-0e097519ef54.gif）

artf

我今天应该能发布修复😬方案 https://github.com/artf/grapesjs/issues/3291

GJSBlock

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

查看详情

#32872021年2月23日作者 RaresVlaiduc4 个回答

1 个反应

提问组件文档 typescript

Wrapper styling

首先，祝贺@artf完成了这个了不起的项目 💯 我目前正在做一个项目，想问一下是否可以像编辑里面其他组件那样编辑包装器（主体）。例如，我想像编辑背景色一样编辑包装的填充部分。 ![grapesjs-问题]（https://user-images.githubusercontent.com/73160095/108832886-c72c0700-75d4-11eb-8d74-daa48d8a0440.png）我看过配置，但没找到有用的信息。谢谢！ LE：我找到了方法。我正在覆盖getWrapper（）里的可样式数组，但我不完全确定这是不是正确的方法。你能确认吗？

artf

是的，@kuhelbeher，现在封装器是在插件后创建的，所以你可以像扩展其他组件一样完全扩展它

artf

LE：我找到了方法。我正在覆盖getWrapper（）中的可样式数组，但我不确定这是不是正确的方法。你能确认吗？是的，当然没问题，但如果需要，可以通过“mainConfig.domComponents.wrapper”选项在init时更改包装器属性 https://github.com/artf/grapesjs/blob/18b2f95b7f844578dc2b28d786b126013d155d9e/src/dom_components/config/config.j...

kuhelbeher

你可以通过“mainConfig.domComponents.wrapper”选项在init时更改包装器属性https://github.com/artf/grapesjs/blob/18b2f95b7f844578dc2b28d786b126013d155d9e/src/dom_components/config/config.js#L9 你好，我注意到这些选项是针对旧版本的 Grapesjs，但在新版本中 domComponents 配置中，封装属性被移除了。有没有办法...

查看详情

#32792021年2月19日作者 abulka2 个回答

0 个反应

提问组件 style-manager 缺陷画布

How to make textnode editing update component content?

我正在构建一个自定义的“textarea”组件，希望它能像内置的“text”组件一样，这样编辑grapesjs画布上的textnode时，会更新'.components'中的'textnode'。我希望组件能正确导出为 HTML，比如“<textarea>我的用户编辑了 TEXTNODE CONTENT”</textarea>。目前，'fancyTextarea'导出的html在textnode上总是保持不变，尽管我在画布上编辑了它。有没有什么textnode变更事件我应该捕获并执行——我找不到？这是我的组件 “JavaScript const fancyTextarea = editor => { 编辑。DomCompone...

artf

你好@abulka，既然编辑是在视图中进行的，你应该在视图更新后更新组件模型。所以应该能用类似这样的东西 “''js 型号：{ ... }, 浏览量：{ 事件：{ 输入：'handleInputUpdate'， }, handleInputUpdate（ev） { this.model.components（ev.target.value）; } }, ```

GJSBlock

谢谢你举报，@abulka。如何让textnode编辑更新组件内容？的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本...

查看详情

#32782021年2月18日作者 Dmurl51 个回答

0 个反应

组件缺陷提问文档画布

Custom component view onRender is called early

版本：以下用0.16.34（从 https://unpkg.com/grapesjs 回归）和0.16.22在Preact项目中复制详细描述那个漏洞自定义的GrapesJS组件在渲染到画布时调用视图的“onRender”函数。根据文档说明： ![图片]（https://user-images.githubusercontent.com/17631765/108421023-30d59b00-71fa-11eb-8af8-49522a3f18d8.png）我预计在组件完全渲染到画布上，所有尺寸和位置属性都确定后，才会调用这个。然而，正如下面的重现代码笔所示，onRender（）是在确定元素尺寸之前被调用的，且元素的大小为...

GJSBlock

谢谢你举报，@Dmurl5。渲染上的自定义组件视图称为早期的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因在报...

查看详情

#32702021年2月15日作者 haizenbergD2 个回答

0 个反应

提问组件 typescript

How to export JS code from angular components?

嘿，我在我的Angular应用里用的是Grapesjs 我有一个自定义的 Angular 组件（基本上是用 angular 创建的自定义 HTML），我正在尝试用“grapesjs-plugin-export” 导出内容我遇到的问题是导出后，没有 JS 代码（最初在 Angular 组件里）能用 HTML 做我需要的事。我想知道你能不能帮我解决这个问题。 <img width=“1025” alt=“截图 2021-02-15 上午11：41 37” src=“https://user-images.githubusercontent.com/51407611/107929782-cf57c700-6f82-11eb-8c8f...

artf

你可以在这里了解更多关于带有 js 的组件信息：https://grapesjs.com/docs/modules/Components-js.html#basic-scripts

GJSBlock

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

查看详情

#32662021年2月9日作者 amliu2 个回答

0 个反应

提问组件 typescript

如何知道所选组件是从哪个方块生成的？

想知道如何进行反向查找，从组件回溯到模块。我用 Block Manager add（）初始化后添加一个类似的方块。如果选中的组件是由这个自定义块生成的，我该怎么办？

artf

你应该更多地考虑组件而不是方块，确实合适的方块应该看起来更像这样。 “''js 编辑。BlockManager.add（'block-id'， { 唱片公司：... 内容：{ 类型：'component-id' }， }) 一旦丢弃了那个方块，你总能获得那个属性 'component.get（'fromBlock'）'

GJSBlock

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

查看详情

#32622021年2月4日作者 lacieri2 个回答

0 个反应

style-manager 提问组件 accessibility typescript

Parse styles to a Css string

你好@artf！ “JavaScript “编辑”： { “CSS”： “* { 框大小：border-box; }#wrapper{字体家族：Helvetica，Arial Black，无衬线;color：#9500b3;}“， “html”：“<div id=\”iecr\“>将你的文本插入此处</div>”， “资产”：“[]”， “styles”：“[{\”selectors\“：[\”#wrapper\“]，\”style\“：{\”font-family\“：\”Helvetica，Arial Black，无衬线\“，\”color\“：\”#9500b3\“}}，]”， “组件”：“[]” } } ``` 有没有办法...

artf

你应该可以用“editorInstance.getCss（）”从任何 GrapesJS 实例中获取 CSS。这基本上是从“样式”JSON 生成 CSS

GJSBlock

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

查看详情

#32602021年2月3日作者 mhowey3 个回答

1 个反应

组件缺陷提问 style-manager typescript

Color Picker Transparency slider is at 0 in firefox.

Grapesjs 的颜色选择器在 Chrome 和 Firefox 之间工作方式不同。当你打开选中的组件，而该组件之前从未设置过背景色（例如......），颜色选择器在Chrome中设置为100%不透明度，Firefox中设置为0%。问题是用户在使用Firefox时甚至可能热点查看这个透明度滑块，尝试更改颜色却失败，却没意识到透明度是0%。预期行为：在所有浏览器中，当被样式的组件从未指定背景色时，颜色选择器默认会将透明度设置为100%。实际行为：在Chrome中，颜色选择器正常工作。在Firefox中，颜色选择器最初总是以不透明度滑块为0%打开。提前感谢你的精彩项目！！版本：最新消息你可以在控制台输入“grape...

mhowey

@artf Firefox 和 Chrome 的另一个区别是调色板显示的内容。Firefox显示透明方框，而Chrome显示灰色方框。

artf

似乎在最新的Firefox版本上已经解决了

GJSBlock

谢谢你举报，@mhowey。 Firefox中*色彩选择器透明度滑块在0的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根...

查看详情

#32592021年2月3日作者 bgrand-ch2 个回答

1 个反应

缺陷提问组件文档 style-manager

V0.16.27 - Style/ID disappear when nested span

版本： 0.16.27 你能重现演示中的bug吗？ [ ] 是的 [ ] 不 [X] 视频但没有演示预期的行为是什么？添加尽可能多的嵌套“span”元素，并保留它们的样式/ID。目前的行为是什么？从两个嵌套的“span”元素中，父“span”元素的样式/ID会消失。你能附上截图、截屏或实时演示吗？ [X] 是的（附上） [ ] 不 https://user-images.githubusercontent.com/17108974/106736579-e9ee7f80-6615-11eb-9f5e-a3236d026c98.mp4 TextEditor.vue “''js // ... 方法：{ onButtonClic...

artf

你好，Benjamin，这个bug已经修复了（报告bug时，请确保使用最新版本）

GJSBlock

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

查看详情

#32582021年2月2日作者 stljeff14 个回答

0 个反应

组件 typescript 提问文档

防止/禁用自定义块被丢弃在其他自定义块中

你好，我有一个自定义组件，我们称它为Section Block。我想防止用户在其他区块里丢弃分段块。这可能吗？参考：https://grapesjs.com/docs/modules/Components.html#define-custom-component-type 我知道可以在新的组件类型上定义可拖拽的选项。我对这些选项的理解是包容的。有没有办法让可拖拽的排他性，比如我说“这个方块可以丢弃在除[[组件类型]]以外的任何地方”？

artf

你可以用 '：not（）' 选择器，比如'：not（.except-this-class）'

stljeff1

谢谢@artf。这个方案大致上奏效。现在我遇到了一个新问题，一些占位符文本消失了。在我的模块内部的某些元素中，我会有一个带有文本节点的HTML元素，然后是另一个嵌套的HTML元素。例如，包含图标的链接标签。当我在组件模型中添加可拖曳选项时，块内类似上述A标签的HTML元素会失去文本节点。如果我用类似span标签的方式包裹这些文本节点，文本会保留。不变的元素示例：你知道有什么方法会导致文本节点出现在与其他元素一起的容器中时消失吗？以下是我创建自定义组件的方式：如果这...

artf

你用旧的API定义组件，这需要其他东西才能正常工作，这可能是问题的原因（我自己试过，一切正常）。请在这里查看正确的 API https://grapesjs.com/docs/modules/Components.html#define-custom-component-type

查看详情

GrapesJS 问题

浏览所有主题