GrapesJS 问题

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

找到 183 个问题

🔍 documentation
#33312021年3月10日作者 Abhisheknanda13444634 个回答
2 个反应

自定义资产管理器

你好@artf 我按照文档制作了一种新型资产管理公司 这里(https://codepen.io/abhi_punk81/pen/MWbWzaq) 我创建了类似文档里那种的新类型 我如何在放置自定义图标块后打开那个资产管理器 -: 一开始它没问题,但当我放下图片块后,默认情况下就会出现一个 请你指点一下我,我正在尝试为 Icons One 创建一个新的插件 根据之前提到的问题,我用add command(添加命令)来调用图标组件的comnd,卡住了:双击时怎么更新目标-: “''js const cm = 编辑。指挥; cm.add('svg-icon', { run(editor, sender, opts) { const a...

Abhisheknanda1344463

@artf 实现了,并且还能处理大小写不区分 https://user-images.githubusercontent.com/20657737/112457190-82d18980-8d81-11eb-895b-b5c42e849f3a.mov 谢谢!!❤️

Abhisheknanda1344463

嗨@artf不知怎么的我做到了 在组件激活时,我把这个标记为 -: “''js 事件:{ dblclick:“onActive” }, onActive () { 编辑。AssetManager.render(editor.AssetManager.getAll().filter(asset => asset.get('type') == 'svg-icon')); editor.runCommand(“open-assets”, { 目标:This.model, });...

artf

应该和你之前做的类似 “编辑。AssetManager.render(editor.AssetManager.getAll().filter(asset => asset.get('type') == 'svg-icon'));' 所以通过搜索找到资源,然后用渲染更新

#33302021年3月10日作者 RaresVlaiduc1 个回答
0 个反应

组件启动移动时触发了什么事件

又见面了! 当前情况:我开始剪辑在图层管理器中,我最大化了移动容器(箭头图标)的宽度,这样我可以通过点击任意方向拖动元素我在编辑器中快速移动,不小心移动了图层,而不是选择它 我想要的:例如,我想将移动事件的开始提前300毫秒,这样在这300毫秒内只触发选择动作 你知道移动时触发的事件叫什么吗(来自图层管理器)。 谢谢! LE: component:drag:start 是事件

ClaudeCode

谢谢你举报,@RaresVlaiduc。 关于组件启动移动时触发的事件,这个问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')...

#33162021年3月5日作者 am1rb4 个回答
1 个反应

编辑器不会移除死稿块

版本: 0.16.34 你能重现演示中的bug吗? [ ] 是的 [x ] 不 据我了解,导入代码对话框跳过了所有HTML脚本,所以我无法在演示中重现这个问题 预期的行为是什么? 编辑者必须先移除失效脚本块,才能在生成的HTML末尾添加新的脚本块 详细描述那个漏洞* 我在项目中用脚本(https://grapesjs.com/docs/modules/Components-js.html)定义了一个组件。当我将这个组件添加到编辑器并保存模板时,编辑器生成 HTML,并在正文末尾附加一个脚本块以启动相关组件。 输出的HTML大致是这样的: '''html <head> <!-- 生成的 HTML --> <script>/ 附加的脚...

Ju99ernaut

我无法复现这个,也许你能提供更多关于自定义组件的信息,无论如何我怀疑这是存储相关的问题。你是先存储然后加载生成的HTML页面吗?

Andrew-Chen-Wang

通常内联脚本会放在正文底部。试着把它放那里?

am1rb

我自己不添加任何内容。编辑器会在生成的HTML末尾添加与组件相关的脚本,并添加一个新的脚本标签。 请查看这个文件: https://github.com/artf/grapesjs/blob/dev/src/editor/model/Editor.js#L513 我觉得这里可能有问题。编辑器会添加新的脚本块,但不会移除旧的。

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

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

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 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解决的?

#33032021年3月2日作者 RutujaBadbe4 个回答
1 个反应

类别顺序显示不正确

嗨! 我想在区块管理器中按特定顺序显示这些类别。我查阅了文档和之前的问题,发现了订单属性。于是,我尝试设置了顺序属性。但即使 ORDER 属性正在设置,它还没有按那个顺序显示。我是不是漏掉了什么?或者做错了什么? 我正在做的是: 因此,期望的结果是按顺序查看类别——标题、旋转木马横幅、版块、类别、新闻信件、页脚 但我仍然感受到的是—— ![捕获](https://user-images.githubusercontent.com/53044783/109652612-0387d600-7b86-11eb-88ca-38a9ed0c219a.PNG)

Ju99ernaut

我想你可以把它设为功能请求,我不确定Grapesjs上是否已经有类似的功能。不过如果你把每个类别的块拆分成不同的文件,然后按顺序加载这些文件,可能会更容易管理。

Ju99ernaut

我认为方块添加的顺序决定了类别顺序。

RutujaBadbe

@Ju99ernaut你好!谢谢你的回复。是的。最后我做了。但如果我想动态地做呢?如果有很多区块,保持顺序难道不难吗?

#32942021年2月27日作者 server1024 个回答
0 个反应

功能:在样式管理器中为属性列表数组添加选项

你好, 我怎样才能在属性列表中添加buildProps,使得当选择某个选项时,该选项的属性会显示出来 这是我在flex属性上想要实现的目标示例。 “JavaScript { 名称:“布局”, 开启:真, buildProps: ['display'], 性质:[ { 类型:“无线电”, 属性:“显示”, 列表:[ { 标题:“区块”, 名称:'<span class=“material-icons”>calendarviewday</span>', 值:“方块”, }, { 标题:“Flex”, 名称:'<span 类=“material-icons”>calendarviewweek</span>', 值:“flex”, bui...

Ju99ernaut

我相信你可以把构建道具从属性列表中移出,仍然能实现你想要的功能,内置的Flex Box相关属性只有在组件带有“display: flex”时才会显示。还需要注意的是,“buildProps”只是输入的预设,不能嵌入到其他输入中,也就是属性列表 “''js { 名称:“布局”, 开启:真, buildProps: ['display', 'direct', 'align-content', 'align-items', 'align-items', 'align-self',...

server102

谢谢。我试过了,但网格属性不起作用。可能得手动实现,但不确定怎么最好地处理这个问题。

Ju99ernaut

网格属性没有“buildProps”,所以你得从头开始构建,遗憾的是文档里关于自定义属性的信息不多,你可能得从API参考里拼凑起来 https://grapesjs.com/docs/api/style_manager.html#stylemanager

#32892021年2月23日作者 bgrand-ch4 个回答
2 个反应

(0.16.41) 组件已失去其风格

版本: 0.16.41 你能重现演示中的bug吗? [X] 是的 [ ] 不 预期的行为是什么? 1)将选中的父组件(容器)复制到剪贴板。 2)从剪贴板中选定的父组件(容器)粘贴到同一页面或其他页面。 3)所有组件都保留ID样式和内联样式。 目前的行为是什么? 1)将选中的父组件(容器)复制到剪贴板。 2)从剪贴板中选定的父组件(容器)粘贴到同一页面或其他页面。 3)组件失去了ID样式,但内联样式未丢失。 组件没有重新生成的样式ID,而是使用相同的之前ID,但带有“-2”。 你能附上截图、截屏或实时演示吗? [X] 是的(附上) [ ] 不 https://jsfiddle.net/bgrandch/71yuz26p/33/ 根据...

artf

那是因为你用你的版本更新了原始命令(错误地)。确实,如果我把你的插件从演示中移除,一切都会正常运行。请检查原始的复制粘贴命令,你应该在粘贴前克隆组件,所以你的实现可能无法正常工作。

artf

只要检查原始命令 https://github.com/artf/grapesjs/blob/dev/src/commands/view/CopyComponent.js https://github.com/artf/grapesjs/blob/dev/src/commands/view/PasteComponent.js

bgrand-ch

@artf 谢谢你的回答。请提供链接、示例或更多解释?😅

#32872021年2月23日作者 RaresVlaiduc4 个回答
1 个反应

包装造型

首先,祝贺@artf完成了这个了不起的项目 💯 我目前正在做一个项目,想问一下是否可以像编辑里面其他组件那样编辑包装器(主体)。 例如,我想像编辑背景色一样编辑包装的填充部分。 ![葡萄提问](https://user-images.githubusercontent.com/73160095/108832886-c72c0700-75d4-11eb-8d74-daa48d8a0440.png) 我看过配置,但没找到有用的信息。 谢谢! LE:我找到了方法。我正在覆盖getWrapper()中的可样式数组,但我不确定这是不是正确的方法。你能确认吗?

artf

是的,@kuhelbeher,现在封装器是在插件后创建的,所以你可以像扩展其他组件一样完全扩展它

artf

LE:我找到了方法。我正在覆盖getWrapper()中的可样式数组,但我不确定这是不是正确的方法。你能确认吗? 是的,当然没问题,但如果需要,可以通过“mainConfig.domComponents.wrapper”选项在init时更改包装器属性 https://github.com/artf/grapesjs/blob/18b2f95b7f844578dc2b28d786b126013d155d9e/src/dom_components/config/config.j...

kuhelbeher

你可以通过“mainConfig.domComponents.wrapper”选项在init时更改包装器属性https://github.com/artf/grapesjs/blob/18b2f95b7f844578dc2b28d786b126013d155d9e/src/dom_components/config/config.js#L9 你好,我注意到这些选项是针对旧版本的 Grapesjs,但在新版本中 domComponents 配置中,封装属性被移除了。有没有办法...

#32802021年2月19日作者 bgrand-ch1 个回答
0 个反应

特色:无渲染

你想给GrapesJS添加什么? 我尝试为GrapesJS做样式并调整其元素(面板、按钮、画布等),覆盖所有样式元素真的很烦人。 描述你的功能请求 一个无渲染的GrapesJS。将特定的 GrapesJS 元素(面板、按钮、画布等)附加到文档中的任意容器中。为独立的类和子类添加样式(.gjs、.gjs-panels、.gjs-panel-{name}、.gjs-buttons、.gjs-button-{name} 等)。使用这些功能的指南(如果已有的话),仅为样式和定位指南。 最新版本有替代方案吗? [ ] 是的(描述另一种情况) [X] 不 这是否与某个问题有关? [ ] 是的(请提供本期链接) [X] 不

ClaudeCode

谢谢你举报,@bgrand-ch。 关于FEAT:无渲染的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行细致跟踪 构建一...

#32782021年2月18日作者 Dmurl51 个回答
0 个反应

Render上的自定义组件视图被称为早期

版本: 以下用0.16.34(从 https://unpkg.com/grapesjs 回归)和0.16.22在Preact项目中复制 详细描述那个漏洞 自定义的GrapesJS组件在渲染到画布时调用视图的“onRender”函数。根据文档说明: ![图片](https://user-images.githubusercontent.com/17631765/108421023-30d59b00-71fa-11eb-8af8-49522a3f18d8.png) 我预计在组件完全渲染到画布上,所有尺寸和位置属性都确定后,才会调用这个。然而,正如下面的重现代码笔所示,onRender() 是在确定元素尺寸之前被调用的,且元素的大小为...

ClaudeCode

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

浏览所有主题