GrapesJS 问题

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

状态

排序

找到 220 个问题

🔍 canvas

#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）——这有助于团队更快识别根本原因在报...

查看详情

#32682021年2月12日作者 theSC0RP4 个回答

0 个反应

提问增强画布 typescript

How to add javascript in the html without sanitization?

@artf，我正在接收用户的JavaScript输入。我需要在模板HTML里添加这个JavaScript，但它会被净化。有没有办法关闭消毒功能？（我对你提到的#3245问题没有意见）或者你能在编辑器里添加类似“allowSanitization： false”这样的属性吗？如果不行，那我该如何把JavaScript添加到画布上？

theSC0RP

我尝试在画布渲染的iframe中添加脚本，在<script>iframe正体末尾加了“'标签。这在某种程度上是可行的。问题是，当我需要更新脚本中的 js 时，我需要刷新 iframe（如果有事件监听器就移除），这样做会出现以下错误： ![截图来自2021-02-18 10-54-24]（https://user-images.githubusercontent.com/30771519/108309560-beec5a00-71d7-11eb-9bfe-e7a48c5e6f...

artf

你能提供一个可复现的演示吗？

theSC0RP

谢谢你的回复@artf。我更新iframe时出错了，现在问题解决了！再问一下，有没有内置的方法可以刷新iframe？

查看详情

#32532021年1月29日作者 luziye92 个回答

0 个反应

提问组件画布 typescript

当数值变动时，属性颜色是如何变成蓝色的？

你好，我们遇到了一个问题——当拖动新组件到画布时，属性名称（如“宽度”）的颜色是蓝色的，但我们并没有修改它的值。 ![图片]（https://user-images.githubusercontent.com/64573639/106257856-13935980-6258-11eb-92fb-6ad0e17da323.png） Grapesjs 很有力量，对我们非常有帮助。不过，我们对 grapesjs还很陌生，已经为此问题花了很多时间，但没有进展。请告诉我们具体的机制，或者相关代码所在的是什么文件？如果你能在本周末前回复我，我将非常感激。非常感谢:) 此致，贾伦

artf

你好，@luziye9你肯定用的是带有自定义“样式”属性的块/组件...... 无论如何，如果你要打开一个 BUG 问题，你必须按照模板（Grapesjs 版本、可复现的演示等）操作。所以，目前我决定关闭这个无效问题。

GJSBlock

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

查看详情

#32522021年1月28日作者 ThetripGr4 个回答

0 个反应

style-manager 提问画布依赖 typescript

Does getHtml() remove the inline style property?

我在尝试如何更改画布内元素的样式时，发现用颜色选择器特性设置元素的内联样式颜色属性（不是通过getCS（）获得的内联样式标签），但使用getHtml（）时，这个样式属性完全消失了。我注意到在各期问题中有一个被弃用的 propertyavoidInlineStyle。如果是这样，为什么会出现这种情况？为什么现在不再是这个选项了？我想把CSS保存在特别需要的地方，内联保存，不想多一个样式标签和所有独特的ID，因为我没有使用样式管理器。这有可能实现吗？

artf

@DodoTrip原因是内联CSS不能定义带有状态（例如'：悬停'）和媒体查询的样式，所以我一直觉得它是个无用的限制，而不是功能。尽管如此，如果你不需要组件响应性或不同状态，你仍然可以使用这个选项。

ThetripGr

你好，@artf，感谢你的回复。能举个例子说明现在是怎么做的吗？还是应该避免InlineStyle让它更容易使用？

artf

说实话，我很早就不再用 avoidInlineStyle，但我想它应该能用 😁

查看详情

#32382021年1月18日作者 sizhousama3 个回答

1 个反应

提问 style-manager 画布 typescript

：如何加载外部JavaScript，我尝试了所有方法，没用

我用块写html字符串，需要引入很多外部脚本和样式，但我尝试了所有方法，拖动块到画布时脚本不生效，样式可以加载，希望能得到帮助。通过附加子加载 ![图片]（https://user-images.githubusercontent.com/40018231/104894741-fbc0f900-596c-11eb-9d92-2d5c1e59f4d3.png）init load by canvas：{scripts：[...]} ![图片]（https://user-images.githubusercontent.com/40018231/104894830-14c9aa00-596d-11eb-909f-e6bcf2aa6cef...

harsh201

@sizhousama我在初始化Grapesjs编辑器时通过Canvas加载脚本/样式表，对我来说是正常的。 “'' js 画布：{ 剧本：['https://unpkg.com/abc.js']，风格：['https://unpkg.com/abc/dist/css/abc.min.css']， }, ``` 更多详情可见[这里]（https://grapesjs.com/docs/modules/Components-js.html#dependencies）。希望...

sizhousama

控制台显示已加载 ![图片]（https://user-images.githubusercontent.com/40018231/104895114-62dead80-596d-11eb-9f6e-0b73d17b3f02.png）

GJSBlock

谢谢你举报，@sizhousama。关于[问题]：如何加载外部JavaScript，我尝试了所有方法，都没用。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => consol...

查看详情

#32322021年1月15日作者 matiasmasciotta2 个回答

0 个反应

组件提问画布 typescript

DRAG AND DROP COMPONENTS:

你好，我遇到了以下问题：我需要一个事件类型编辑器（“sorter： drag： end”），在所有这些情况下都会被投掷：（检测我投放的元素和位置） 1- 当你从blockManager拖放一个元素并放到画布上时，让它听到。 2- 当你把已经组件化的元素从画布拖到画布的另一个区域时，让它听到声音。 3- 当我在 layerManager 中移动元素时会听到这个声音。用排序器我解决了情况2,1没有出现，因为元素还没有被分成，所以在尝试添加属性时，在被分成之前，它作为标准元素被添加到html画布中，忽略了我手动添加的属性。你能帮我吗？谢谢

bgrand-ch

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

GJSBlock

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

查看详情

#32232021年1月7日作者 ianef3 个回答

2 个反应

画布 style-manager 组件增强 typescript

Create the canvas from a URL

我一直在玩 GrapesJS，并尝试把它集成到 Symfony 5 的项目中。特别是，我希望能够在编辑器中编辑基于Bootstrap 4和其他组件（如FontAwesome Pro）的模板，以及基于这些的自定义块。我用Symfony的Webpack-Encore捆绑包来生成应用程序的脚本和样式文件，这让当前的iframe画布系统用同样的版本化组件（如Bootstrap等）工作非常头疼。目前我只能通过初始化配置向画布注入样式和脚本URL，比如这样：问题是我想保留与主应用中包含组件版本完全相同的版本。如果我升级这些，我希望它能反映在画布使用的组件中，这可能还包括自定义代码和样式。在 SymFony 和其他主要框架中，链接根资源...

ianef

真是太遗憾了。我没说要从其他网站取用，我想做的是保持和项目其他部分的一致性。算了，我还是继续找别的地方，找一个能更好地整合当前大型应用构建方式的编辑器。Webpack 和其他转译器确实是大型项目的领先选择，即使是小项目也有好处。

artf

嗨 Ian，如果你需要从 URL 加载 HTML 内容，我只能建议在服务器端获取并用该内容初始化编辑器（在浏览器中加载外部资源通常会遇到跨源问题），所以就浏览器的工作原理来说，我看不出添加这种功能的合理性。

GJSBlock

谢谢你举报，@ianef。关于FEAT：从URL创建画布的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*”事件进行细致跟踪构...

查看详情

#32222021年1月7日作者 bgrand-ch3 个回答

0 个反应

提问 style-manager 组件文档画布

How to refresh/re-render after new node added?

我会手动在渲染组件中添加一个新节点。视觉效果还可以，但无法保存，因为我的风格不是用自动生成的GrapesJS ID。要手动解决这个难题，我双击要进入的组件，然后在画布主体中点击外部。然后，将 GrapesJS ID 和 'data-gjs-type='text' 添加到新节点，从而可以保存。 Vue.js： “Main.vue”文件的一部分： “''js 文本编辑器 https://grapesjs.com/docs/api/richtexteditor.html https://css-tricks.com/creating-vue-js-component-instances-programmatically/ const...

bgrand-ch

优化后的“TextEditor.vue”文件： “''js // ... onFontValidate （） { const { rte } = this.getRteData（） const spanNode = document.createElement（'span'）设 anchorNode = {} this.selection.childNodes.forEach（childNode => { console.log（{ childNode }） if （ch...

bgrand-ch

i️ 它不能直接用 HTML，只能用 JSON。 Component = JSON 节点（html元素 + GrapesJS 数据） “''js addStylesToText （styles， tagName = 'span'） { const inlineStyles = styles.map（style => style.join（'：'））.join(';') + ';' const selectedComponent = this.editor.getSelect...

GJSBlock

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

查看详情

#31962020年12月19日作者 fzerman3 个回答

1 个反应

缺陷提问画布

Build grapesjs with npm

你好，@artf，非常感谢你提供这个很棒的框架。我想为 grapesjs做出贡献。不过，我用webpack和babel时很蠢。当我尝试构建 grapesjs时，我犯了一些错误。错误：我该如何修复这个错误？谢谢。

longdoan7421

@Swindler36 这个错误是找不到“eslint”。你运行过“npm安装”吗？

fzerman

@longdoan7421我修正了这个错误。谢谢。我想问两个关于webpack和Babel的新问题。我可以分别使用webpack和Babel。但是。我没能将它们集成。我该怎么做？如何利用它的npm文件在没有测试的情况下构建 grapesjs ？我只想生成捆绑包文件。

GJSBlock

谢谢你举报，@fzerman。问题：用npm构建 grapesjs 的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定：检查初始化顺序 — 确保组件在操作前已完全加载使用编辑器的事件系统 — 收听完成事件：推荐的下一步步骤：如果还没测试，请用最新的 GrapesJS 版本测试提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本...

查看详情

GrapesJS 问题

浏览所有主题