GrapesJS 问题

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

状态

排序

找到 203 个问题

🔍 enhancement

#33922021年4月7日作者 rywilson283 个回答

0 个反应

组件增强文档 style-manager typescript

Allow dynamic droppable configuration using a function

我有一个要求，不能用选择器来判断某个元素是否可以丢弃。例如： ![图片]（https://user-images.githubusercontent.com/45426659/113861790-96afbf00-9775-11eb-9369-2a18a71c0dd6.png） “子”组件必须位于“父”组件中，但如果子组件包含 ref 属性，只能将其拖入与当前父组件匹配的 ref 值的其他父容器中。根据上述标记，子组件可以丢弃到最后一个容器，但不能丢弃参考为5678的容器。不过，第二个子元素可以被丢弃到任一父组件中。如果可丢弃函数允许以下函数，这将很容易实现：可掉落：（src，目标）=> { 一些逻辑返回真值; },...

rywilson28

相关公关：https://github.com/artf/grapesjs/pull/3393

rywilson28

@artf对这个功能或PR的做法有任何疑问吗？

GJSBlock

谢谢你举报，@rywilson28。关于FEAT：允许使用函数动态丢弃配置的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*”事件...

查看详情

#33812021年4月2日作者 pranay22103 个回答

1 个反应

提问 style-manager 组件缺陷增强

在组件间切换会产生最大呼叫堆栈大小误差

你好，artf，感谢你打造了这样强大的定制CMS工具。我正在项目中实现一个新页面功能，所以我用你的参考来切换组件，但出现了错误，请问能否指导我如何在面板点击“添加新页面”按钮时构建新页面？这是我的代码

Ju99ernaut

我觉得数组不是存储页面对象的最佳方式，所以运行数组操作获取页面并加载页面对调用栈来说可能太繁琐了。你应该考虑只在需要时才把页面加载到内存里，并存储在类似数据库的环境中，而不是数组。你可以试试这个插件 https://github.com/Ju99ernaut/grapesjs-template-manager

artf

我不确定你那边的情况，但我建议关注#3206，因为内置页面管理器快准备好了（我会更新那个问题）

GJSBlock

谢谢你举报，@pranay2210。关于在组件间切换会导致最大调用堆栈大小错误的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*...

查看详情

#33712021年3月29日作者 devtechk2 个回答

2 个反应

增强提问常规

Generate pages numbers any idea?

大家好，我正在通过 grapesjs 创建一个文档生成器，我想在每页底部插入类似“第1页共5页”这样的页码。我的起始模板有一个叫.page的封装类，实际上我可以把一个页面克隆到另一个页面下面，从而获得更多页面。你知道我该如何实现这个功能吗？谢谢！

devtechk

大家好！我找到了实现目标的方法！CSS 的属性！这是我的工作代码（你可以随意调用分页标签）。来源：https://www.pagedmedia.org/paged-js/ HTML： ' <页码类=“text-right 页码”>页 </pagination> ` CSS

GJSBlock

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

查看详情

#33642021年3月25日作者 NagarRahul3 个回答

0 个反应

提问增强文档 typescript

FEAT：@How在容器内拖动元素时，固定容器大小，Container 将根据子拖拽元素被消耗。我们如何根据父容器自动调整子元素大小。容器不应根据子元素来消耗。应该是显示卷轴。

警告请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么？详细描述你的功能需求详细最新版本有替代方案吗？[ ] 是的（描述替代方案）[ ] 不这是否与某个问题有关？[ ] 是的（请...

NagarRahul

@artf ![图片]（https://user-images.githubusercontent.com/42827466/112465042-40607a80-8d8a-11eb-828c-a0e88ca7e113.png）我拖动按钮时，它就是消耗。我想修复它。拖动新按钮时不应该消耗。溢出后会滚动鞋卷。

artf

这主要取决于组件的样式（比如用Display Inline-Block来控制那个按钮可能会解决这个问题）

GJSBlock

谢谢你举报，@NagarRahul。关于FEAT：@How在容器内拖拽元素时，固定容器大小，容器会根据子拖拽元素被消耗。我们如何根据父容器自动调整子元素大小。容器不应根据子元素来消耗。应该是展示卷轴。！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector...

查看详情

#33562021年3月22日作者 mitcht2 个回答

0 个反应

增强组件缺陷提问

Unminified version in the latest release

你想给GrapesJS添加什么？每个版本的未压缩版本详细描述你的功能需求详细我正在使用一些更复杂的方法，使用组件管理器。最后一个未压缩的“调试”版本是 0.15.xx。能否同时发布未压缩版和压缩版，以便能进入代码？ This请求来自我试图向同事解释addComponent功能的工作原理，但无法完整解释，于是我试图进入代码，却发现没有未压缩版本existed 最新版本有替代方案吗？[ ] 是的（描述替代方案）[X] 不 - 我想用最新版本，而不是旧版本来实现这个功能这是否与某个问题有关？[ ] 是的（请提供本期链接）[X] 不

artf

你好@mitcht当前的捆绑包包含了压缩文件，同时也包含了源码映射，所以你可以很容易地通过开发工具查看原始代码（更多内容见这里，[https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps）]），因此如果你需要调试代码，没有必要同时包含未压缩版本。你的情况呢？我觉得直接展示源代码（在Github上）更有信息量。

GJSBlock

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

查看详情

#33452021年3月17日作者 joshk1324 个回答

0 个反应

style-manager 组件增强文档画布

面板和按钮部分，入门时无法使用 Vue.js

我正在努力让 grapejs Vue.js工作，但没有成功，我跟着入门程序操作，但还是没能正常工作。到目前为止，我已经把它添加到了 mounted() 部分，并且已经设置了一些带方块的按钮，可以显示并添加，但 [面板和按钮部分]（https://grapesjs.com/docs/getting-started.html#panels-buttons）一直没成功。问题总结：使用Vue.js我无法让面板和按钮部分从开始时显示出来。下面我附上了我目前主要想添加的App.vue文件——概念验证会稍后移到合适的位置。

uchoaaa

看看这个问题，可能会有帮助：https://github.com/artf/grapesjs/issues/275

artf

你好@joshk132说代码看起来不错，你能做一个可复现的演示吗（比如Codesandbox之类的软件）？

joshk132

@artf我已经让面板显示的位置正常工作了，但现在显示不正常了。我不得不做的解决方案是改用下面的代码。基本上我必须把“editor”作为变量，但我在最初的代码里已经去掉了，因为 vue linter 会抱怨。附上了一张图片链接，展示了下面代码的效果，我不太确定具体是什么原因导致了样式问题。 https://imgur.com/GuFqv0o

查看详情

#33322021年3月11日作者 AmtechInnovarch4 个回答

1 个反应

增强安全依赖

近一半的软件包都存在高风险漏洞，且都存在一定的漏洞。

NPM之后，我们可以看到漏洞的程度是不可接受的。新增了来自383位贡献者的646个包，并在7.892秒内审核了762个包发现了724个漏洞（353个低点，23个中等，348个高）运行“NPM Audit Fix”来修复这些问题，或者使用“NPM Audit”获取详细信息我正在尝试解决这个问题，至少在本地范围内。这会花很长时间，因为每个指定的软件包都存在漏洞。

AmtechInnovarch

这就是为什么有数十年经验的资深程序员不赞成JS作为后端语言。JavaScript 本来就不是用来做服务器端语言的，这些节点包会制造漏洞，导致服务器被黑。这是一个严重的安全隐患，开发者应当及时解决，或者在 readme.md 中提供足够的警告，劝阻生产环境使用，但不修复所有漏洞。有没有办法只使用GrapesJS的客户端层？开发者能否识别出客户端文件？

KernelDeimos

GrapesJS 有服务器端层吗？

KernelDeimos

JavaScript 并不是设计成服务器端语言，这些节点包会制造漏洞，导致服务器被黑。你是说Javascript是唯一依赖会引入安全漏洞的语言吗？如果 JavaScript 有什么特性让这类漏洞更可能发生，你应该在陈述中明确说明，否则你说的只是主观的胡说八道。

查看详情

#33172021年3月5日作者 martijnc3 个回答

0 个反应

增强组件提问

Add support for promises to custom RTE API

你想给GrapesJS添加什么？支持基于承诺的 API 的富文本编辑器。详细描述你的功能需求详细 CKEditor5 的“Editor.create”和“Editor.destroy”方法返回一个“承诺”，当编辑器完全创建或销毁时才会解决。这会导致销毁编辑器（完成组件编辑）时出现问题，因为 GrapesJS 在 'Editor.destroy' 承诺尚未解决之前就同步了修改到模型，导致 CKEditor HTML 写入模型。作为一个变通方法，你可以在承诺解决后再次同步内容，但如果API支持承诺会更干净。我们可以以向后兼容的方式添加这一点，比如检查RTE的“使能”和“禁用”方法的返回值是否可，如果是，则等待承诺解析后再继续。...

artf

是的，说得通，我建议你先试着让ComponentTextView中的启用/禁用方法默认异步而不破坏系统，但确认是否可行总是个选项。

artf

这本应已经是可行的。

GJSBlock

谢谢你举报，@martijnc。关于FEAT：支持自定义RTE API的承诺，真是太棒了！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*...

查看详情

#33132021年3月5日作者 fahad1574 个回答

2 个反应

增强提问文档 typescript

让文本可编辑需要大量点击，我们能让文本字段在一次点击中可编辑吗？

警告请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么？详细描述你的功能需求详细最新版本有替代方案吗？ [ ] 是的（描述另一种情况） [ ] 不这是否与某个问题有关？ [ ]...

Andrew-Chen-Wang

拖动方块时单击操作会让人烦。如果你已经选好了方块，仍然需要双击。如果你没选中某个区块，那你只需双击该区块来编辑文本。我觉得这已经很常见了。

fahad157

@Andrew-陈王：是的，没错，但我的情况是想用单击编辑，如果可能的话请指导一下。

mihir-khandekar

你@fahad157解决的？

查看详情

#33122021年3月5日作者 Andrew-Chen-Wang3 个回答

0 个反应

增强提问常规

Make side panel's width to 20%

你想给GrapesJS添加什么？侧板看起来被揉皱了。除非你的桌面很大，否则我不太希望块面板的图片被放到一边。此外，顶部的图标，比如“获得新方块”图标，除非屏幕较大，否则会被遮挡。详细描述你的功能需求详细将侧面板宽度从15%改为20%，具体来说是类别：'gjs-pn-views-container' 最新版本有替代方案吗？ [ ] 是的（描述另一种情况） [X] 不这是否与某个问题有关？ [ ] 是的（请提供本期链接） [X] 不

Ju99ernaut

目的是最大化画布覆盖的面积，但你也可以用自定义CSS轻松更改面板大小。

Andrew-Chen-Wang

当然，我只是觉得试玩版不应该看起来像那样皱巴巴的:P那我想这只是个人看法。

GJSBlock

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

查看详情

GrapesJS 问题

浏览所有主题