GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#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'));' 所以通过搜索找到资源,然后用渲染更新

#33292021年3月10日作者 imouou4 个回答
0 个反应

我应该如何在脚本中获得自定义特质修改?

你好,@artf,这是一个很棒的框架,非常感谢。 我现在用它来创建移动版 BUI 框架的组件,遇到了一个问题,我添加了自定义的特性文本区,我该如何制作这个?当数据发生变化时,它会在输出脚本中触发。 “''js 编辑。TraitManager.addType('textarea', { createInput({ 特质, 组成部分 }) { 这里我们可以决定使用性状中的性质 const el=document.createElement('div'); el.innerHTML = ' <textarea class=“buiv-textarea” name=“${options[0].name}” rows=“${options[...

Ju99ernaut

你需要在“剧本道具”中添加这个特质,你可以在这里阅读更多内容 https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts

imouou

谢谢@Ju99ernaut,如果是某些内置功能,修改脚本时可以接收参数值,我目前遇到问题:自定义功能“textarea”可以触发DOM等更改,但导出脚本无法接收该参数的值,即使脚本道具设置为“datas”。

Ju99ernaut

你可以尝试强制脚本更新: “''js 编辑。DomComponents.addType('slide', { 型号:{ // ... init() { this.on('change:datas', () => this.trigger('change:script')); }, }, // ... }); ```

#33282021年3月9日作者 D-Rosa994 个回答
2 个反应

我如何通过输入表单更新组件的nodeValue(文本值)

你好。 Grapesjs是个很棒的工具。谢谢你。 我想通过输入更新组件的文本值,我该怎么做? 如果用户在输入框中填写类似“茶站,标题应改为该网站 ![图片](https://user-images.githubusercontent.com/43874147/110532756-9d560280-80f3-11eb-8d27-639a006b3e79.png)

artf

只要找到组件,然后按你的想法更新它 “''js cont typedByUser = '类型某物...'; const cmp = editor.getWrapper().find('.any-query-selector')[0]; cmp && cmp.components(typedByUser); ```

millord

我也想用类似的 Grapes 应用,但用 React 通过控制输入更新文本组件。有人能帮忙吗?

D-Rosa99

可以,谢谢

#33252021年3月9日作者 mmotov4 个回答
0 个反应

JSON.stringify(this.editor.getComponents()) 错误

版本: 0.16.44 你好!我有页面的远程存储,最近在保存页面时遇到了一个问题,'JSON.stringify(editor.getComponents()'开始弹出错误,'Uncaught TypeError: e[M].getId is not a function'。 我检查了页面已保存的JSON表示,发现它在这部分失败了 我不知道“__symbol”键的用途,但没有它,一切都正常。 这个问题只在少数几页出现,但我担心其他页面也会再次出现。

yucomds

这里也是同样的错误......你有解决办法吗? [编辑]目前降级似乎是唯一的解决办法

josfh2005

这里也有同样的问题,如果我在加载编辑器前先预处理组件并移除那个属性(__symbol),模板就能正常工作。 现在有没有办法暂时禁用这些符号@artf?

artf

是的,不幸的是,之前版本的葡萄有个bug,导致符号不自愿出现。在当前版本中,这个bug已经修复,符号被禁用了,但不幸的是,如果你尝试加载一个包含由bug创建的符号引用的组件,仍然会出现这个问题。 我会在下一个版本中为这个问题添加补丁,目前我会听从Josè的建议,在加载编辑器前删除所有“__symbol”引用。

#33222021年3月7日作者 Andrew-Chen-Wang1 个回答
0 个反应

如何更新内置组件的特性?

NVM 你必须在插件里加组件覆盖。

ClaudeCode

谢谢你举报,@Andrew陈旺。 关于如何更新内置组件特性?的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周...

#33192021年3月5日作者 anatoli-dp3 个回答
0 个反应

图层生成新行后文本不会居中

版本: 现在? 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗? [ ] 是的 [ x] 没有 // 公平地说,演示版里从未尝试过 预期的行为是什么? 在编辑图层文本并添加新行并回距时,我本应期望编辑后的文本被重新输入 详细描述那个漏洞 文本不会重新置中,而是被凸起(见附图) 目前的行为是什么? 按回车键开始新行后,文字会升高到中心以上,然后往外退行。不过完全清除所有文本和重新输入时,文字确实会重新置中。 你能附上截图、截屏或实时演示吗?** [ x] 是的(附上) [ ] 不 ![截图(32)](https://user-images.githubusercontent.com/7502...

artf

好的,我会推送图层名称编辑的修复,可能启用新行不太合理(我会在Enter/Esc键上停止编辑)。 第二个问题,如果你用自己的工具来调整画布大小,可能应该调用“editor.refresh()”来调整工具栏

anatoli-dp

是的,我后来才意识到editor.refresh()这个功能。否则谢谢。太棒的项目了

ClaudeCode

谢谢你举报,@anatoli-DP。 关于图层生成新行后文本不会居中,这个问题问得很好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something c...

#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 我觉得这里可能有问题。编辑器会添加新的脚本块,但不会移除旧的。

#33152021年3月5日作者 devtechk4 个回答
3 个反应

毫米或厘米单位转换为px。

我意识到毫米或厘米单位是可以转换成像素的。我该如何解决这个问题? 谢谢你 ![图片](https://user-images.githubusercontent.com/22073497/110118707-0ddee580-7dbb-11eb-8749-69e918b9ce91.png)

Ju99ernaut

你有没有在样式管理器输入中添加毫米、厘米等单位,这些不是内置的

Ju99ernaut

如上所述,这是浏览器引擎的功能,通常这是解决办法,但我从没用过它来处理非内置的设备: “''js window.editor = grapesjs.init({ // ... styleManager: { // ... avoidComputed: ['宽度', '高度', '填充', 'margin'], // ... } // ... }); ```

Andrew-Chen-Wang

我觉得这就是浏览器引擎的本质性。我不是专家,但我认为输出只是发动机最终解读的信息。

#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解决的?

#33092021年3月4日作者 jcamejo4 个回答
0 个反应

TextNodes 在元素内容更改时会干扰

版本: 0.16.44 你好@artf 我有一个自定义方块,带有自定义按钮组件,内容和这个类似。 ` <a data-gjs-type=“custom_button” class=“btn btn-1” href=“”>Click here</a>' 此外,我添加了一个文本特性来更改按钮内容,但在这个特定情况下,我不想使用编辑器RTE。 <img width=“286” alt=“image” src=“https://user-images.githubusercontent.com/1976679/109966677-d3a91180-7cf0-11eb-8463-e28b8de806c2.png”> 当我更改数值时,第一次会...

artf

你好,Juan,谢谢你的报告,你能给我演示一下你的文本特性是怎么工作的吗? 如果你用这种方式更新组件 'component.components(e.target.value)',我预计它应该能正常工作

jcamejo

这是我的特质 我已经改成 现在它不用覆盖更新内容或渲染子节点,谢谢!我绝不会得出使用“组件”方法的结论。 现在我不喜欢文本节点 😅 我觉得除非你还有其他改进点,否则我们可以结束这个问题。 谢谢!

artf

我觉得你不需要这个“target.set('content', value);”。其他的都很好 👍

浏览所有主题