PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 3,464 个问题
我遇到了视频分量的问题。 我选择了提供者并添加视频源，然后保存了 html，但当我再次将 html 加载到编辑器时，视频分量源被替换为 < svg xmlns=“http://www.w3.org/2000/svg” width=“100” viewBox=“0 0 24 24” style=“fill： rgba（0,0,0,0.15）; transform： scale（0.75）”><path d=“M8.5 13.5l2.5 3 3.5-4.5 4.5 6H5m16 1V5a2 2 0 0 0-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2z”></path...
artf
你好@olgertpysqyli你应该遵循这个方法，并依赖JSON数据来编辑 https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates
你好...... 我需要在我的组件上自定义AF名称。我可以通过添加 data-gjs-custom-name=“myname”来实现，但对于已经插入的元素，我该怎么做？ 我试着编辑。SelectorManager.getAll（）.each（selector => $（'h1'）.attr（“data-gjs-custom-name”，“h1”））; 但这并没有起作用。 比如说，怎么可能在所有 h1 上都写一个名字？
artf
我可以通过添加 data-gjs-custom-name=“myname” 来实现。 用“name”代替“custom-name”（这个名字用于编辑图层），所以“data-gjs-name=”myname“。比如说，怎么可能在所有 h1 上都给名字？ 你可以创建一个自定义组件来扩展H1元素的定义，这样这个定义会应用到所有H1（甚至是最近添加的），或者你也可以只在画布中的组件上进行交互式操作 “''js editor.getWrapper（）.find（'h1'）.forEa...
[问题] 嗨！我正在从数据库中检索动态 html、css 和 js 代码。我该如何用这个来创建方块？ 目前，这是我的代码， ``` 编辑。BlockManager.add（$aBlock['name']， { id： $aBlock['name']， 标签：$aBlock['name']， 类别：$aBlock['类别']， 内容：$aBlock['html']， 风格：$aBlock['CSS']， 脚本：$aBlock['CSS']， }); 但这并没有起作用。请帮帮我。谢谢。
cristianumali22
嗨@pouyamiralayi，所以，正在做， “内容：”<div></div><style></style> GrapesJS 的下载代码功能会将 HTML 和 CSS 分开吗？ 注意，每个代码块中都有不同的HTML、CSS和JS。比如例子block1的CSS不会影响block2的风格吗？
pouyamiralayi
@cristianumali22你的代码看起来没问题，而且它不会在 grapesjs 初始化前执行，因为你是在传递引用而不是实际调用它！ 我建议用[Grapesjs CL]（https://github.com/artf/grapesjs-cli），因为它能帮你完成所有设置，给你一个干净的环境。 干杯！
pouyamiralayi
@cristianumali22请考虑将你的“html”和“css”都放在“content”属性里，就像这样： 要包含脚本，你必须定义一个[新组件类型]（https://grapesjs.com/docs/modules/Components.html#define-custom-component-type），然后继续定义[组件和JS]（https://grapesjs.com/docs/modules/Components-js.html） 干杯！
我想做一个外部 HTML 元素，可以拖入 GrapesJS，就像拖入一个方块会添加内容一样。 我有一个示例，其中的 div 是 draggable=“true”，一个普通 div 和一张图片。图片拖入时没问题，如果你选择普通 div 的文本并拖入，它也能正常，但 draggable=“true” 的 div 拖拽不正常。我希望 div 能像另外两个元素一样，并自动添加到编辑器中。 https://jsfiddle.net/091wftym/1/ 我怎样才能正确地让 draggable=“true” 的 div 元素 drop 本身正确？ 谢谢
artf
@Davidvlv HTML5的D&D不是这样工作的，仅仅添加'draggable=“true”是不够的。这只是告诉浏览器“嘿，你可以拖我！”，但你还得指定你想拖什么（用'dataTransfer.setData' API）。 这里有你的示例，详细说明了正确的设置和'canvas：dragdata'的使用（仅供参考，这里不一定必要） https://jsfiddle.net/artur_arseniev/87rcb24n/
sdrebel
你试过这个吗？ editor = grapesjs.init（{ ....... 拖模式：“绝对”，// “绝对” |“翻译” ...... }) 而且你还可以为每个组件设置拖拽模式。 https://grapesjs.com/docs/api/component.html#index
Davidvlv
你好@sdrebel 这并没有解决我的问题。我附上了一个展示jsfiddle的视频——注意draggable=“true”的div不会拖入编辑器。 [ 导入grapesjs draggable.zip ]（https://github.com/artf/grapesjs/files/4253275/grapesjs.import.draggable.zip）
有没有可能在默认资产管理器里增加一个额外的按钮来调用其他操作？ 大致是这样的： <img width=“895” alt=“截图 2020-02-21 16 45 45” src=“https://user-images.githubusercontent.com/26910184/75078089-48385600-54ca-11ea-9ad0-6279e7a8b20e.png”>
pouyamiralayi
#2316
你好， 我们遇到了一个大问题——我们的布局使用了大量 display: flex; flex-direction: column;，这导致Chrome和Safari浏览器（不是Firefox）出现极大的延迟。 如果 flex-direction 风格设置为 row，则完全没有卡顿。 样本：https://jsfiddle.net/gkeft254/ 点击内侧元素，复制并拖动。 视频： [grapesjs slowdown.zip]（https://github.com/artf/grapesjs/files/4234338/grapesjs.slowdown.zip）
artf
是的，确实慢了，不确定具体情况，但初步猜测可能是这个函数，它检查组件是块（比如div）还是内联元素（比如span）。 https://github.com/artf/grapesjs/blob/1214bbd957e88df78cd99491e53ab243010cd1ed/src/utils/Sorter.js#L549 任何帮助都非常欢迎
artf
无法再繁殖了
你好，有没有办法设置模态的宽度？目前CSS设置为850px，但我想创建一个文字量较少的对话框，而且太大了： ![图片]（https://user-images.githubusercontent.com/79406/74995098-d9052800-541d-11ea-9563-0ec3c8a3dc24.png） 但如果能有这个就太好了： ![图片]（https://user-images.githubusercontent.com/79406/74995129-f33f0600-541d-11ea-936d-15570597a6f6.png） 不覆盖CSS，因为我仍然想使用大型模态。 我查了源代码和文档，似乎唯一能设置的属性是...
ronaldaug
对于那些不知道如何使用模态“属性”的人来说， 你可以在 modal 的 open 方法中添加选项“opts.attributes”，如下所示。 “JavaScript const modal = 编辑器。模态; const opts = { 属性：{ class：'my-custom-class'， id：'my-custom-id' } } modal.open（opts）; ``` 因为我在[这里的文档]（https://grapesjs.com/docs/api/mo...
kaoz70
好的，我想做一个函数来设置宽度，比如：setWidth（'400px'），还有一个自定义属性的方法：setAttributes（{'data-custom-attribute'： 123}）。 我觉得需要两个函数，因为宽度由CSS控制，模态设计也是，所以在这种情况下让用户设置宽度就足够了。属性函数则用于其他需要的情况 你怎么看？
kaoz70
你好，抱歉我现在工作堆得很满，如果@sunnykgupta能试试这个就太好了。
我看到版本号是递增的，但该包在 0.15.15 之后就没有在 npm 上发布。该来个0.16 😃了 关于NPM的其他问题：https://github.com/artf/grapesjs/issues/2568（不确定是否相关）
artf
可能会在开发仓库里看到新版本，但这意味着该版本还不稳定，无法发布 😉
你好，@artf， 到目前为止，和Grapesjs合作非常棒。一旦理解了它，使用起来就很简单。 我只有一个建议，能不能在编辑器里加入网格和缩放选项？
artf
你说的网格和比例是什么意思？
sdrebel
你好，@artf， 附上图片。大概是这样的 ![图片]（https://user-images.githubusercontent.com/19382262/75219367-94351480-57c2-11ea-8708-fab4f0747a9f.png）
artf
不，这个功能目前还没有，也没有计划，但如果有人想尝试整合（即使是通过插件），请告诉我
您好！我该如何从父类别创建一个子类别到？可能像附图那样吗？附言：图片只是为了展示我想做的效果而编辑的。 ![图片]（https://user-images.githubusercontent.com/34620142/74805390-e804b100-531d-11ea-9fa9-bfd12b50bef4.png）
artf
不，默认情况下你只能使用分类