专长:从一个URL创建画布
真是太遗憾了。我没说要从其他网站取用,我想做的是保持和项目其他部分的一致性。 算了,我还是继续找别的地方,找一个能更好地整合当前大型应用构建方式的编辑器。Webpack 和其他转译器确实是大型项目的领先选择,即使是小项目也有好处。
阅读下方完整回答 ↓问题
我一直在玩 GrapesJS,并尝试把它集成到 Symfony 5 的项目中。特别是,我希望能够在编辑器中编辑基于Bootstrap 4和其他组件(如FontAwesome Pro)的模板,以及基于这些的自定义块。 我用Symfony的Webpack-Encore捆绑包来生成应用程序的脚本和样式文件,这让当前的iframe画布系统用同样的版本化组件(如Bootstrap等)工作非常头疼。 目前我只能通过初始化配置向画布注入样式和脚本URL,比如这样: 问题是我想保留与主应用中包含组件版本完全相同的版本。如果我升级这些,我希望它能反映在画布使用的组件中,这可能还包括自定义代码和样式。 在 SymFony 和其他主要框架中,链接根资源到公共区域外并不是好习惯,根资源通常是在构建过程中创建并压缩到公共区域的。 Webpack 根据不同情况创建构建文件的方式不同。在开发模式下,它们由本地热插拔服务器提供;在生产模式下,来自静态构建文件,这些文件名中可能包含也可能不包含版本控制。而且通用代码可以拆分出来减少开销。你通常用条目名引用你需要的文件,然后从webpack构建结构中拉取所需的文件。 基本上,要从这些中挑选到某个视图所需的根文件非常麻烦,而这些视图在下一次构建中可能会非常不同。 我想提议我们可以选择性地提供一个URL作为iframe的基础文档。在这种情况下,GrapesJS 会用 U...
回答(3)
真是太遗憾了。我没说要从其他网站取用,我想做的是保持和项目其他部分的一致性。
算了,我还是继续找别的地方,找一个能更好地整合当前大型应用构建方式的编辑器。Webpack 和其他转译器确实是大型项目的领先选择,即使是小项目也有好处。
嗨 Ian,如果你需要从 URL 加载 HTML 内容,我只能建议在服务器端获取并用该内容初始化编辑器(在浏览器中加载外部资源通常会遇到跨源问题),所以就浏览器的工作原理来说,我看不出添加这种功能的合理性。
谢谢你举报,@ianef。 关于FEAT:从URL创建画布的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行细致跟踪 构建一个插件,扩展编辑器并具备此功能 正式宣布: 如果此功能能惠及更多用户,考虑在 GrapesJS 仓库上正式开启功能请...
相关问答
通过相似的问题讨论继续研究。
问题 #3449
切换页面会反复调用画布样式和脚本
嗨 我正在将页面管理器集成到我的项目中。但我遇到的问题是,每当我在页面之间切换时,它会反复加载 canvas 对象中初始化时给出的 CSS 和脚本文件。 这让页面切换变得缓慢。 实施: Grapesjs.init({ pageManager: { 页码:[ { id:“第1页”...
问题 #3575
Grapes.min.js:2 未捕获类型错误:无法读取未定义的属性“长度”
我添加 <iframe src=“https://app.conversiobot.com/boot/fvMEvO” width=“100%” height=“500” frameBorder=“0” allow=“geolocation”></iframe> 使用了自定义代码...
问题 #3699
细胞悬停随机偏离实际细胞
嗨! 我在公司的一个项目中使用 grapesJs 进行电子邮件编辑,并配合 Newsletter 插件。 一切都运行得很好,除了我无法解决的这个bug: 有时候,当我在画布里拖动方块时,单元悬停会乱局。最大的问题是这种行为完全随机,会发生也可能不发生,但一旦发生会很烦人。 唯一...
问题 #3345
面板和按钮部分,入门时无法使用 Vue.js
我正在努力让葡萄Vue.js工作,但没有进展,我一直在跟着起步,但没能让它正常工作。到目前为止,我已经把它加到了“mounted()”部分,也拿到了带方块的按钮可以显示和添加,但[面板和按钮部分](https://grapesjs.com/docs/getting-starte...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps — a beginner-friendly 2026 comparison
教程
Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor
Live WCAG 2.1/2.2 accessibility auditor + SEO manager for GrapesJS. Every finding is bound to the exact component — click to select, then one-click fix.
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
浏览插件分类
直接跳转到市场上的插件分类页面。