GrapesJS 问题

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

状态

排序

找到 3,464 个问题

#29222020年7月27日作者 RJCAM3 个回答

2 个反应

：获取所有不含特定组件的CSS及其子组件

你好，在本期 #2861 中，我们可以获取选定元素及其子节点的所有 css 如下：但如果我想获取所有 css 但没有特定组件且是子组件，或者正好相反有没有办法做到这一点？

mcottret

嗨@RJCAM！我觉得没有内置的方法，但基于你提供的回答，你可以递归地连接所有组件的CSS，过滤掉选中的组件及其子组件，如下（假设示例中用的是“window.editor”，可能需要调整）： “打字稿” function getAllExceptSelectedComponentsCss（includeWrapper = true） { const selectedComponent = editor.getSelected（）; 退货包封吗？ allExceptSele...

mcottret

@RJCAM抱歉，我刚注意到我之前的回答不起作用，因为检索带有子组件的组件的CSS也包含了子组件的CSS（因此会产生重复样式，如果组件嵌套了也会包含该组件的样式）。我编辑了它来修正这个问题。

RJCAM

你好，@mcottret，感谢你的回复我觉得你说得对，我会编辑你的代码，让它按我预期运行非常感谢你的帮助，谢谢！

查看详情

#29212020年7月27日作者 Davidvlv3 个回答

4 个反应

BUG：禁用类时，样式管理器中的自动保存无法正常工作

版本： 0.16.18 你能重现演示中的bug吗？ [x] 是的：https://jsfiddle.net/ju1a0onx/ 预期的行为是什么？自动保存在样式更改后应该总是调用“store”命令，即使类已经禁用目前的行为是什么？当你禁用某个元素上的所有类（或者全部设为私有——这个示例中没有展示）并进行样式更改时，自动保存不会生效，你的更改也不会被保存。你能附上截图、截屏或实时演示吗？ [x] 是的 [Grapesjs 自动保存bug.zip]（https://github.com/artf/grapesjs/files/4980448/Grapesjs.autosave.bug.zip）

artf

感谢你的报告，'editor.load' 方法存在一个漏洞，目前可以通过这种方式修补 “''js editor.load（（） => { const em = editor.getModel（）; em.get（'storables'）.forEach（md => md.postLoad && md.postLoad（em））; }); ``` 实际上，如果你用 'editor.load（）' 只是因为它启动时不加载，那是因为你必须在插件里定义自定义存储，这样'autolo...

Joshmamroud

@Davidvlv我也遇到同样的问题。我认为这是配置里的“avoidInlineStyles： 1”和没有选中类的组合。它似乎在“avoidInlineStyles： 0”下工作正常。

Davidvlv

我试过了，这个设置确实能防止它在应该保存的时候不保存，但这会给我们后续使用输出带来一些其他问题。我们开启了avoidInlineStyles以避免这些问题。

查看详情

#29202020年7月26日作者 wfcheng3 个回答

0 个反应

问题：用 summernote 替代富文本编辑器似乎不起作用

我正在尝试用[summernote]（https://summernote.org/）替换Grapesjs中的默认RTE。我得到了summernote作者的帮助，让这个[codepen]（https://jsfiddle.net/easylogic/hxre19cL/43/）勉强能用，但summernote作者得出的结论是： '但 grapejs p element 是 iframe 中的一个内容。换句话说，存在一个结构，p 标签存在于 iframe，而 ui 必须存在于外部。Summernote是一种结构，隐藏了元素，并贴上了Summernote的标签。它似乎很难使用，因为summernote的其他资源都没有加载在ifram...

wfcheng

做了一些修改，现在 summernote 工具栏显示正常，但只有项目符号格式能正常。新的编码笔位于[这里]（https://jsfiddle.net/easylogic/hxre19cL/70/）。 @artf 任何建议都将不胜感激。

timramseyjr

@wfcheng 你后来有进展吗？Codepen包含了canvas脚本/样式，这些脚本会在iframe里添加资源，所以我有点搞不清楚summernote作者指的是什么。

wisecheng38

@timramseyjr我最后只是在RTE工具栏里增加了更多按钮，允许在选定文本上应用字体样式和颜色，尽管Grapesjs的文档建议使用样式管理器。我发现把它们放在工具栏上更友好。

查看详情

#29192020年7月26日作者 BerkeAras2 个回答

1 个反应

BUG：自定义块被封装成一个 div

版本： 0.16.18 你能重现演示中的bug吗？ [X] 是的：[https://codesandbox.io/s/empty-night-8q733?file=/index.js]（https://codesandbox.io/s/empty-night-8q733?file=/index.js） [ ] 不预期的行为是什么？元素“链接按钮”不应该出现在 div 里。不应该有 div，只有一个 'a' 标签目前的行为是什么？自定义块会被包裹在一个 div 里。你能附上截图、截屏或实时演示吗？ [X] 是的 [https://codesandbox.io/s/empty-night-8q733?file=/index....

mcottret

你好@BerkeAras！如[开始页面]（https://grapesjs.com/docs/getting-started.html#define-components）所示，你可以在定义自定义块和组件时指定“tagName”属性来覆盖默认的“div”标签。干杯！

artf

你传递了一个组件的描述（默认为“<div>'），然后给该组件添加内部的”内容“（''<a>标签）

查看详情

#29182020年7月25日作者 neon123453 个回答

0 个反应

缺陷

BUG：textnode 未从 Canvas 中移除

直接导入到包装器的文本不会随组件从画布中移除。为了验证，可以多次导入简单的文本到演示中，观察它们如何组合，而不是替换之前的文本。补充这些似乎有帮助：编辑。DomComponents.addType（'textnode'， { 型号：{ removed（） { var el = this.getEl（）; el.parentNode.removeChild（el）; } } }); 用demo v0.16.18测试过。

artf

我不太理解你的例子，能具体说明繁殖步骤吗？

neon12345

去 https://grapesjs.com/demo-newsletter-editor.html 的新闻通讯演示版，使用“导入模板”功能，包含像“hello”这样简单的文字但不包含 html（或者在根级和 html 和文本结合）。重复这个过程，根节点上的文本不会被删除，而是每次导入时都会累积。

artf

谢谢@neon12345，我找到了问题，应该会在下一个版本中修复

查看详情

#29172020年7月24日作者 cartifon3 个回答

2 个反应

BUG：样式管理不会隐藏样式块

@artf，我正在尝试根据所选元素隐藏样式属性。例如，当我在GrapesJS上拖放图片时，我想只显示宽度属性，但“不可样式化/可样式化”属性无法使用。版本： “grapesjs”： “^0.16.18”，你能重现演示中的bug吗？ [X] 是的 [ ] 不预期的行为是什么？为了隐藏不在我数组中的属性目前的行为是什么？它没有隐藏任何东西。你能附上截图、截屏或实时演示吗？ [X] 是的（附上） [ ] 不 https://stackblitz.com/edit/grapesjs-stylable

mcottret

你好@cartifon！我相信“可样式化”属性只适用于组件，不适用于你举的例子中的方块。以下方法应该能解决问题： “打字稿” 方块数：[ { id：“图像”，标签：“Image”，丢弃组件后选择选择：真，你可以把组件作为 JSON 传递，而不是简单的 HTML 字符串，在这种情况下，我们还使用定义了组件类型“图像” 内容：{ 类型：“图片”，可样式化：['width'] }，这会触发掉落组件和“镜像”的“激活”事件通过打开资产管理器来反应激活：真 } ]...

cartifon

我还有个问题，不可造型的效果会一样吗？

cartifon

嘿，@mcottret，谢谢你的帮助。是的，确实能用！也许文档应该对此更明确一些。

查看详情

#29162020年7月24日作者 mcottret2 个回答

1 个反应

：使用自定义RTE时文本组件内容未能正确检索

版本： 0.16.12 你能重现演示中的bug吗？ [ ] 是的 [x] 不（不包含自定义RTE）预期的行为是什么？使用自定义RTE时，生成/导出的代码应与RTE生成的代码对应目前的行为是什么？生成的代码对应于[文本组件canvas元素的“innerHTML”]（https://github.com/artf/grapesjs/blob/v0.16.12/src/domcomponents/view/ComponentTextView.js#L88）。以 CKEditor 为例：创建空锚点（如截图 1）会导致 GJS 生成的代码包含锚标志的 '<img>' 元素（参见截图 2），而 CKEditor 则正确生成（参见截图...

artf

你的解决方案似乎是对👍的永久居民会很有帮助

mcottret

太棒了！artf/grapesjs-plugin-ckeditor#39 & #2977 已打开。

查看详情

#29152020年7月24日作者 maxaggedon1 个回答

0 个反应

与react-pdf的使用

文档中引用了React-pdf（https://grapesjs.com/docs/），但我没看到其他地方有相关提及...... 有人知道有没有用 grapesjs 作为 PDF 模板构建器制作过一个工作项目吗？如果有任何关于如何整合两者的信息，我将非常感激 =）

artf

你可以创建自定义组件并反映React-PDF组件的行为（类似于我们对MJML所做的），所以关键是理解自定义组件的工作原理。

查看详情

#29142020年7月23日作者 BerkeAras2 个回答

3 个反应

专长：利用ID为元素添加自定义样式。

你想给GrapesJS添加什么？用ID给元素添加自定义样式（比如背景）。最新版本有替代方案吗？ [ ] 是的（描述另一种情况） [X] 不这是否与某个问题有关？ [ ] 是的（请提供本期链接） [X] 不

artf

正确的做法是： “''js const compById = editor.getWrapper（）.find（'#i9x9h'）[0]; compById && compById.addStyle（{ 'background-color'： '...' }）; ```

mcottret

你好@BerkeAras！显然它没有文档，但“编辑。Components.allById（）' 可能就是你要找的，比如： “打字稿” 编辑。Components.allById（）['your-id'].set（'style'， {'background-color'： 'red'}）; ``` 希望这些信息对你有帮助，谢谢:)！

查看详情

#29132020年7月23日作者 neon123452 个回答

1 个反应

增强需要帮助

BUG：src 与图片一起存储了两次

“JSON.stringify（editor.getComponents（））”的输出显示，一个图像的src被存储了两次。 { “类型”： “图像” “虚无”：真， “状态”：“已选中”， “内容”：“， “属性”：{ “id”： “iy3c7”， “SRC”：“Data：Image/PNG;base64,...“ <--- 1. }, “SRC”：“Data：Image/PNG;base64,...“，<--- 2。 “activeOnRender”： 0， “Open”：错误 } 版本是v0.16.18——通过演示验证。

artf

@longdoan7421我认为我们可以用“toJSON”方法删除它，当“src”等于“attribute.src”时，并确保加载时正确加载

longdoan7421

你好，@artf，我刚刚快速浏览了一下“ComponentImage”。我认为可以去掉图像模型中的“src”属性，把“ComponentImage”和“ComponentImageView”中使用“src”的代码替换成“attribute.src”。但我不确定你在其他地方是否使用“src”属性？你怎么看？

查看详情

GrapesJS 问题

浏览所有主题