PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验

GrapesJS 问题

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

找到 3,464 个问题

#26472020年3月13日作者 jcamejo3 个回答
3 个反应

拖拽占位符并不能计算正确的宽度。

嗨@artf，希望你今天过得愉快。 当方块被拖入可能有横边边界的容器时，拖拽占位符有个小问题，上下边缘或填充也可能发生，但我不能百分百确定。 <img width=“1107” alt=“image” src=“https://user-images.githubusercontent.com/1976679/76625994-9e803e00-6538-11ea-900e-fbbe3769cabe.png”> 原因是计算容器尺寸的函数 getBoundingClientRect 在某些情况下表现不规则，返回元素宽度却未考虑影响计算的某些属性。 有人之前遇到过类似的问题。 https://stackoverflow.com/que...

artf

说实话，我会保留“getElRect”原样，因为在这种情况下用“getComputedStyle”太贵了，而且函数本身是通用的（所以用“boundingRect.width = boundingRect.width - margin.left - margin.right”这样的功能就没意义）。 我很确定问题出在排序器里，计算元素维度的函数是['getDim']（https://github.com/artf/grapesjs/blob/57ce2aa3e169d7c91b...

jcamejo

我通过阅读“getDim”函数找到了“getElRect”，但我会再做一次研究，寻找其他解决方案。 谢谢！

bgrand-ch

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

查看详情
#26462020年3月13日作者 verloka3 个回答
16 个反应

机构部门

如何为身体添加维度扇区？ ![无题]（https://user-images.githubusercontent.com/5623092/76606236-94e7dd80-651a-11ea-9cf0-80e229ae526f.png）

mcottret

大家好，@verloka@pouyamiralayi， 扇区列表似乎对所有应用组件都是通用的。 然而，组件包含一份属性列表，选择后可以通过样式管理器面板编辑这些属性，用于过滤应用扇区。 在[组件API参考]（https://grapesjs.com/docs/api/component.html#component）中，你可以使用“可样式化”和“不可样式化”属性来包含和/或排除可编辑的属性。 默认情况下，“Body”元素（称为“Wrapper”）包含以下“可样式化”属性：“...

pouyamiralayi

@verloka根据@mcottret回答，你可以像这样恢复整个造型选项： 干杯！

mcottret

> 你好，@verloka和@pouyamiralayi，> 扇区列表似乎对所有应用组件都是通用的。> 然而，组件包含一份属性列表，选择后可以通过样式管理器面板编辑，用于过滤应用扇区。> 从 [组件 API 参考]（https://grapesjs.com/docs/api/component.html#component）中，你可以使用 'styleable' 和 'unstylable' 属性来包含和/或排除可编辑属性。> 默认情况下，“Body”元素（称为“Wrapp...

查看详情
#26452020年3月13日作者 Rasazna2 个回答
2 个反应

如何在不移除之前添加组件内容的情况下，向预期组件添加新内容

警告 请阅读并遵循接下来的五个步骤，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md仅将GitHub Issues用于BUG、功能请求或问题。在问题标题前加上上下文，例如：“[虫子]：.......'先快速搜索一下，看看有没有人没开同样的问题不要要求为你创建示例或代码，先阅读文档和API，然后你可以发布你尝试过的（我们希望看到你的代码）以及你无法实现的所有相关陈述/问题都必须填写/回答，否则问题可能已结束你正在提交一个漏洞你用的是最新版本吗（旧版本不支持）？如果不确定，在控制台输入“grapesjs.version”并按回...

pouyamiralayi

[补充]（https://grapesjs.com/docs/api/component.html#append）

Rasazna

我想在不移除之前添加的数据的情况下，通过特质管理器选项向 div 组件添加数据，有没有办法做到？ 有人能帮我提供一个示例代码吗？

查看详情
#26442020年3月13日作者 Eshayat3 个回答
7 个反应

GrapesJS 从数据库加载 html/css

你好， 我们在Angular应用中使用了grapesjs。我们已经成功创建并保存了 grapesjs 的 html/css 到数据库中。我们仍然找不到其中一件事，在编辑模式下我们想调用API，获取HTML、CSS，然后加载到grapesjs canvas中。我们尝试过用storage manager，但没用，如果有人能分享固定的方法或代码样本，那就太好了。 此致， 埃沙亚特

mcottret

起初，我想我不会用我想调用的原生存储管理器。告诉我我们该怎么做，![图片]（https://user-images.githubusercontent.com/16486488/76583347-1183b780-652d-11ea-8f26-a762933b3f84.png） 如果你不愿意使用存储管理器，我相信这个配置只能用来设置默认画布内容，所以你可以在服务器响应后用这种方式初始化编辑器。 如果你想在初始化后动态更新画布内容，可以使用 [Editor API]（http...

mcottret

你好@Eshayat，我们尝试过用存储管理器，但没用 你能详细说说吗？你是否正确按照“存储管理器”文档中的[“设置远程存储”]（https://grapesjs.com/docs/modules/Storage.html#setup-remote-storage）和[“设置服务器”]（https://grapesjs.com/docs/modules/Storage.html#setup-the-server）部分操作？ 以下配置应可行，前提是你的终端返回的数据格式正确：

Eshayat

你好，第二种方法有效。谢谢你

查看详情
#26412020年3月12日作者 vFire3 个回答
0 个反应

代码编辑器支持

我在想，GrapesJs 里有没有可能有一个代码编辑器，这对前端开发者来说会好很多。 如果支持sysn，滚动会更好，比如你右键点击元素时，代码会自动滚动并高亮与元素相关的代码块。

vFire

还有一个选项是禁用样式管理器，因为现实用户如果不是技术人员，他们不会理解CSS风格，而且风格太复杂，对于前端开发者来说，没有代码编辑器，如果你想要一个真正设计良好的响应式页面，工作起来太困难。 这种直排版会带来很多问题。有很多足够好的车架可以避免使用任何直排式，比如Tailwindcss。

vFire

更进一步，我只是想设置某个特定标签级别的规则，这样它既可选择又可可视化，但规则之外的可视化不会改变它，或者我们可以直接在代码编辑器中选择它，然后直接用行代码编辑。例如，只有正文下方的根 .page 可以拖动排序和丢弃。

artf

这可能是插件 https://grapesjs.com/docs/modules/Plugins.html 的好候选

查看详情
#26402020年3月12日作者 Ace06113 个回答
2 个反应

使用Stylemanager添加额外属性以更改所选方块的属性

感谢你提供这个超棒的插件。我正在把它和我当前的项目整合起来。我对它有一个问题。 这是我的代码，我添加了一个带有3个输入字段的新扇区，我想用这些输入字段中的值更改所选块的属性（id， readOnly）。例如：我想用我的功能更改所选块的ID。我该如何实现这一点？ 编辑。StyleManager.addSector（ “我的区”， { 名称：“元素属性”， 开启：真， 属性： [{ name： “id” }， { name： “name” }， { name： “readOnly” }] buildProps： ['id'， 'readOnly']， }, { 地点：0 } ); 以及更改所选组件的属性： editor.on（“blo...

pouyamiralayi

@Ace0611你可以用[traits]（https://grapesjs.com/docs/modules/Traits.html）来控制道具（ID、头衔等）和属性。 干杯！

pouyamiralayi

@Ace0611用特征识别会覆盖这个吗？ 是的！'id is just a regular prop like others. And notice that grapesjs already provides you with default traits for id & title'。 干杯！

Ace0611

@pouyamiralayi：谢谢你的帮助。不过有个疑问，每个被拖拽的方块都会产生动态ID。用特征来识别会覆盖这个吗？抱歉，我现在正在旅行，暂时不能自己动手。我会尽快试试。

查看详情
#26392020年3月12日作者 MiseryMachine3 个回答
0 个反应

：GrapesJS 移动 Mustache 代币

你好， 我正在使用 GrapesJS 让用户创建报表模板。 我遇到过一个创建表格的块，但表格行是由Mustache代币决定的。 然而，渲染时，标记会被移出表元素。 我认为表格或表格行样式不允许这些标记存在于表格元素结构中。 我的街区： “JavaScript bm.add（'product-list-block'， { 标签：“产品列表”， 属性：{ 类别：“FA FA-header” }, 分类：“产品”， 内容： <div> <table data-gjs-type=“product-list-type” style=“width： 100%;margin： 10px 15px;”> <tr style=“高度：24px;背景...

pouyamiralayi

你试@MiseryMachine过把桌面内部包裹在你块定义中的“tbody”里吗？或者至少把你的胡须标记移到标签里？

MiseryMachine

谢谢你的建议。 我试过，结果还是一样，遗憾的是。 块状脚本： “JavaScript bm.add（'product-list-block'， { 标签：“产品列表”， 属性：{ 类别：“FA FA-header” }, 分类：“产品”， 内容： <div> <table data-gjs-type=“product-list-type” style=“width： 100%;margin： 10px 15px;”> <tr style=“高度：24px;背景：#72a1c...

artf

不，你不能这么做，因为那时你的HTML是无效的，HTML解析器会把它移出去。你需要创建一个有效的HTML内容，才能让浏览器正确渲染： '''html <tr> <td> {{#bomGroupProducts}} <table> ... <tr> <td style=“width： 15%”>{{productImageUrl}}</td> <td> <div style=“font-weight： bold”>{{productName}}</div> <div>{{pr...

查看详情
#26382020年3月11日作者 orionseye1 个回答
1 个反应

添加新类别以供后续使用（尚未设置区块）

我该如何定义一个新的类别，以便后续创建的模块使用......还没给它分配一个区块......然后默认关闭它？ 我的意思是，这个可以用于添加一个区块，但如果我有多个区块可以反复添加到同一个类别呢？有没有办法让类别ID、标签、开放状态在其他地方定义，而不是重复这个过程？ 为了折叠默认的，我用了 “编辑。BlockManager.getCategories（）.each（ctg => ctg.set（'open'， false）'

artf

一旦创建了类别，你可以用它的ID，比如“category： 'some-cat'”

查看详情
#26372020年3月11日作者 mcottret3 个回答
1 个反应

：预览模式和自动组件边界切换

又见面了:) 我们团队最近开始定制编辑器并移除网页预设，可能发现了一些与预览模式相关的bug：退出预览模式时，如果默认的“选项”面板已被移除，或者“sw-visibility”按钮已被移除（来自[这里]（https://github.com/artf/grapesjs/blob/dev/src/commands/view/Preview.js#L52），如果是“editor”，则会触发错误。Panels.getButton（'options'， 'sw-visibility'）' 结果为 null，参见 #2589） 一个建议的解决方案是循环浏览面板集合（通过“editor.”检索）。Panels.getPanels'）来查找“s...

artf

无论如何，预览运行执行时按钮>按钮都已经被禁用了，对吗？ 哦，对了 🤦 ♂从你对链接问题的回复来看，我理解这种行为是有意为之，所以也许解决办法就是像你说的那样，把两个按钮的上下文分开？ 好吧，这可能真的有效......因为处于不同的上下文，其他按钮不会阻止它，你也可以完全不依赖按钮（正如你说的，我可以把它放在另一个面板里），而是通过使用 [Commands.getActive API]（https://grapesjs.com/docs/api/commands.html...

artf

感谢@mcottret所有的参考资料，写得真好:)当预览和 sw-visibility 按钮在同一面板时，#2589 引入的行为会被破坏，这似乎来自 ButtonView 的活跃变更监听器，该监听器会禁用面板中的所有活动按钮。所以如果预览被激活，它会在执行命令前关闭 sw-visibility 按钮，之后会破坏当前的检查。 我认为在这种情况下，我们应该先通过检查 sw-visibility 是否激活来创建一个变量标志，然后再做： https://github.com/art...

mcottret

谢谢你的回复@artf！ 抱歉，我不太确定该怎么做，据我了解，[active change listener]（https://github.com/artf/grapesjs/blob/dev/src/panels/view/ButtonView.js#L101）是在“Preview”的“run”之前执行的，所以“sw-visibility”按钮无论如何都应该在执行“Preview”的“run”时被禁用，对吗？ 根据你对相关问题的回复（https://github.com...

查看详情

浏览所有主题