GrapesJS 问题

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

状态

排序

找到 1,399 个问题

🔍 outdated

#19942019年5月1日作者 webdeveloper04293 个回答

0 个反应

已过时

是否可以只为类名添加 StyleManager 属性

感谢这个超棒的图书馆。我打算在扇区中添加样式控制器。这种风格只针对一个职业名称，不会设定目标。例如，“.xxx-wrapper div.active button：before” （xxx 将是组件标识符，因此内部按钮将由该扇区控制）我试着在文档里找，但找不到。请帮帮我。提前感谢大家。

artf

没有风格管理器只能更改风格属性（CSS），你必须用[Traits]（https://grapesjs.com/docs/modules/Traits.html）

webdeveloper0429

谢谢你，artf。所以我们不能在CSS-Compose中使用嵌套的CSS选择器（“.xxx-封装器div.active button：before”）？

artf

你可以用 [setRule]（https://grapesjs.com/docs/api/css_composer.html#setrule）方法创建任何 CSS 规则，但在样式管理器中只显示基于类的规则

查看详情

#19922019年5月1日作者 benvmatheson3 个回答

0 个反应

已过时

有没有可能移除所有CSS，而不是重置为默认？

保存后我导出CSS，下次加载时导入。在这样做时，它会把我的CSS附加到现有的默认CSS上。 “编辑。CssComposer.clear（）' 似乎重置为默认 CSS，而不是清除所有 CSS。 https://jsfiddle.net/benvmatheson/movxw7p1/3/ 有没有可能清除所有CSS，或者直接用导入CSS替换所有CSS，而不是附加到默认CSS上？

artf

保存后我导出CSS，然后下次加载时导入请 https://grapesjs.com/docs/modules/Storage.html 读这篇

benvmatheson

那些文档里有个例子建议直接用“style”属性：不过，其他风格仍然被预示。是否应假设在导入样式时，它总是会在前面加上以下内容吗？

artf

这是默认的CSS，可以通过“protectedCss”选项更改，但同样，如果你的目的是编辑之前创建的模板，导入导出CSS是错误的。你可能只在创建模板时才需要导入HTML/CSS，这没问题，但之后你应该依赖编辑器创建的JSON。

查看详情

#19912019年4月29日作者 afdallah3 个回答

2 个反应

已过时

可调整大小，使用 px 输出中的 unitWidth 换成百分比。

你好，@artf，感谢你制作了这个了不起的框架。最近我基于你的[flexbox插件]（https://github.com/artf/grapesjs-blocks-flexbox）做了一个自定义组件。 ![演示]（https://cdn.kapwing.com/final5cc6e37564533c0013870e09827753.gif）红色箭头是模型的实际值。绿箭头正是我预期的那个。能不能把“unitWidth”设为“px”，但输出设置为“percent”？以下是我尝试过的方法我将它们分为两个部分， “网格”组件，仅作为容器，然后我将显示设置为“flex”，“列”组件，我把它放成可调整大小。可调大小 “JavaS...

artf

啊等等，是我错了，'opts'是第三个 'updateWidth（model， value， opts = {}） {' 顺便说一下，setStyle中的第二个参数是选项（例如，'{ silent： true }'以避免触发变更监听器），这些选项也会在监听者的回调中出现，所以我就用自定义键'fromPxToPerc'来判断自定义逻辑什么时候触发变更

afdallah

你真是太棒了!! 👍 👍 非常感谢@artf。

artf

你好，@afdallah，从调整尺寸的角度来说，你需要使用“updateTarget”选项来自定义目标，但很遗憾你不能，因为它已经[被SelectCommand大量使用]（https://github.com/artf/grapesjs/blob/dev/src/commands/view/SelectComponent.js#L430-L473）所以我建议你尝试在 updateWidth 函数中使用它，以避免无限循环： “''js updateWidth（model，...

查看详情

#19902019年4月29日作者 Ramkumar-Murugesan2 个回答

0 个反应

已过时

需要在移除 HTML 组件前调用 method

你好，我需要先调用该方法，才能移除 HTML 组件。我该怎么做 ![图片]（https://user-images.githubusercontent.com/33427536/56888970-ef0eba00-6a92-11e9-85a4-04d6cf616e26.png）调用方法，类似 Editor.ON（'Block：drag：stop'， function （model） {}）

artf

“''js editor.on（'run：core：component-delete：before'，（） => { alert（“删除前”） }) ```

lock[bot]

由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。

查看详情

#19892019年4月29日作者 edward18932 个回答

0 个反应

已过时

模态画布

有可能做出可以作为画布的模态画吗？我想做一个显示模态的按钮，然后我可以从块管理器里添加模态组件，谢谢

artf

你可能在找带有 js 的 [组件]（https://grapesjs.com/docs/modules/Components-js.html）

lock[bot]

由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。

查看详情

#19882019年4月29日作者 MisterFK3 个回答

1 个反应

需要更多信息已过时

Resize Image上的一个错误

嗨！我在调整图片大小时遇到了一些问题。当我放置图片并点击一个调整尺寸的处理程序时，图片不会保持高度，而是扩展到父容器的100%...... 我在“可调整大小”选项里没找到禁用这个选项： “编辑。DomComponents.addType（'image'， { 型号：{ 默认值：{ 可调整大小：{ 步进：0.05， minDim：1， maxDim：100， unitHeight： '%'，单位宽度：“%”， currentUnit：0， } } } });` 作为背景，图像有一个绝对位置。谢谢大家的帮助！

afdallah

如果你能提供现场演示，大家都会更容易帮忙。我也遇到过同样的问题，不过我这次是因为我把图片高度设成了自动。这是我以前遇到的问题的例子： ![演示图片]（https://media.giphy.com/media/XzdC7pfQ9LTQPTxCT4/giphy.gif）

MisterFK

谢谢，但问题不是一样的。我拍了个视频展示问题： ![ezgif com-video-to gif]（https://user-images.githubusercontent.com/44830209/56891735-89203380-6a8e-11e9-8d42-c530d5aa0ae2.gif）

artf

感谢报告@MisterFK能否提供问题的实时演示？

查看详情

#19872019年4月27日作者 fmr4113 个回答

1 个反应

已过时

在底部创建工具栏

我能创建一个新工具栏，选中组件时位于底部（光标显示的方向）吗？谢谢 ![Screenshot_2]（https://user-images.githubusercontent.com/15244481/56845881-eb8ffd00-68f1-11e9-9529-488dbd5d4174.png）

afdallah

如果你把那个单元格做成自定义组件，可以操作它的“视图” “JavaScript const comps = 编辑器。主成分 comps.addType（'cell'， { isComponent（el） {...}，模型：{...}，浏览量：{ 事件：{ '点击 #extra 工具栏'：'doSomething' }, onRender（） { const el = this.$el el.append（'<button id=“extra-toolbar”>Extra...

fmr411

不仅在单元内，所有组件

afdallah

当然，你可以把同样的技术应用到任何组件上。

查看详情

#19862019年4月27日作者 benvmatheson2 个回答

0 个反应

已过时

配置存储在本地哪里？

当我重新加载徽章构建器时，之前的布局我是在做加载。清除缓存/Cookie或无痕模式打开时，这个问题依然存在。这些是如何存储的？

benvmatheson

看起来这些存储在localStorage里。这样做的目的是什么？建议只清除localStorage来重置数据，还是有 grapes 具体的方法推荐？

lock[bot]

由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。

查看详情

#19852019年4月26日作者 DylanSp3 个回答

1 个反应

缺陷已过时

远程存储的自动保存不会发送网络请求

操作系统：Windows 10 浏览器：Chrome 73 GrapesJS 版本：'0.14.57' 我用这个调用 'grapesjs.init（）' 配置了远程存储：虽然我在Chrome开发工具的网络标签里看到“/load”请求触发，但无论我在编辑器里做多少修改，都没看到任何“/store”的请求。是不是我漏掉了什么配置选项，或者有类似简单的设置？我在 React 里用 Grapes，用 create-react-app;这会不会引发问题？我可以在 CodeSandbox（https://codesandbox.io/s/j4xkz244zv?fontsize=14）上复制这个过程。

DylanSp

更新到下一版本后这个问题解决了，我现在看到了对“/store”端点的请求。谢谢你的提示！

DylanSp

我还要说明，手动保存时用“editor.store（）”，确实会发送一个请求，我在网络标签页里可以看到。

artf

感谢你的报告@DylanSp实际上监听器有问题。如果第一次“加载”调用失败（我猜你的“/load”端点和我一样是假的），它就永远不会开始跟踪编辑器的更改，所以自动保存就不起作用了。这个问题将在下一个版本中修复

查看详情

#19842019年4月26日作者 AkibDeraiya1232 个回答

0 个反应

已过时

点击图片编辑选项时出现问题

嘿，@artf，我看到版本发布 0.14.57。在这个版本中，你可以通过这个库“grapesjs-tui-image-editor.min.js？0.1.2”来支持图片编辑器。之前，我用cropper.js做图片编辑。但它并没有正常工作。我看到用“grapesjs-tui-image-editor.min.js？0.1.2”做图像编辑的演示，效果非常好。我实现了，但当我点击任何默认图片时，就出现了这种问题， ![编辑默认图片错误]（https://user-images.githubusercontent.com/25474716/56813825-72de6180-685b-11e9-8d0e-c9d90c31431a.p...

artf

请查看README文件 https://github.com/artf/grapesjs-tui-image-editor 我在“图标”选项里提到了这个问题，示例会详细说明该怎么做

lock[bot]

由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。

查看详情

GrapesJS 问题

浏览所有主题