GrapesJS 问题

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

找到 3,464 个问题

#31732020年12月8日作者 niveth094 个回答
2 个反应

如何在预览模式下移除眼部斜杠按钮?

你好@artf!我用 GrapesJS 创建了一个网页构建器。 我想在预览模式下移除眼部斜视按钮,改用返回按钮。怎么做?请帮帮我。

robsonsobral

>我建议用[extending](https://grapesjs.com/docs/modules/Commands.html#extending)原始的[预览](https://github.com/artf/grapesjs/blob/dev/src/commands/view/Preview.js)命令感谢你的回复@artf。有没有关于扩展现有命令的文档或示例代码? https://grapesjs.com/docs/modules/Commands.html#ex...

collindutter

@niveth09这里是扩展预览命令(不含眼睛按钮)的代码:

artf

我建议用[extending](https://grapesjs.com/docs/modules/Commands.html#extending)原始的[Preview](https://github.com/artf/grapesjs/blob/dev/src/commands/view/Preview.js)命令

#31722020年12月8日作者 theSC0RP2 个回答
0 个反应

如何在家谱中追踪组件的更新情况?

嗨,@artf。我有一些关于组件生命周期钩子的问题。在我的应用程序中,我想跟踪组件所有子节点及其子节点的更新情况,依此类推。我该怎么做?直接子节点的更新通过“model.updated()”钩子追踪,但我需要跟踪一个组件(我们称之为super child)的更新,该组件是另一个组件的嵌套子节点(我们称之为super parent)。在超级父节点和超级子节点之间,可以有任意数量的组成部分。我该如何跟踪这些更新? 比如,如果我在super child中添加了一个组件,我想在super parent里做一些事情。 而且,我无法在全球范围内追踪这些变化。我想在组件层面做。 <hr/> 为了给我的问题提供更多背景,我现在想做的是:<br/>...

artf

我会在父节点上创建一个专门的监听器 “''js 父分量 ... init() { this.on('cell-changed', this.doStuff) }

ClaudeCode

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

#31712020年12月7日作者 skbhagat404 个回答
0 个反应

添加/更新 href 特征不会在图像中添加“<a></a>'' 封装器。

预期行为——当我更新'href'特性值时,图片应该被包裹在'a'中,'href'值设置为。即 '<A href=“google.com”><img src=“/></a>' 当前行为 = 无变化反映 这里有添加特质的代码 上述功能需双击触发, 请帮我,如何在不使用特征管理器的情况下,从代码动态地将 href 添加到图片中。 ```

skbhagat40

即使我做了 'selectedElement.getTrait('href').set({value: 'fb.com', target: '_blank'})

skbhagat40

我觉得组件视图没有被更新,如果我重复操作,它会渲染带有之前值的“标签”。

skbhagat40

如果我在属性中更新 href,它就能工作

#31702020年12月7日作者 ThetripGr3 个回答
0 个反应

从性状中添加类名

你好,我想实现的是通过分配一个名为“对齐”的额外特征来扩展文本组件,并通过该特征决定我想做的对齐类型,之后不应用 css,但应为组件赋予相应的类名。有没有什么例子能让我自己找到类似的东西 :/ ?

ThetripGr

我又试了几次终于让它工作起来了,我会试着解释一下我是怎么让它工作的。当你定义性状时 “''js 默认值:{ 特质:[{类型:“选择”, 选项:[{ { 值:'myCustomClass',名称:'选项A' }, }], 标签:“traitLabel”, 名称:“traitName”, 变革提案:1 }] }, 抱歉格式有点,我还不会粘贴格式化代码:P

artf

抱歉格式有点乱,但我还不会粘贴格式化的代码:P https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown

ClaudeCode

谢谢你举报,@ThetripGr。 关于从特质中添加职业名称的问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something ch...

#31692020年12月7日作者 mrobertshaw3 个回答
1 个反应

我正在尝试实现一个编辑器,页面的某些部分可以编辑/删除等(比如混合页面,有些元素是动态的,有些则不是)。 我用data-gjs属性来阻止静态元素上的这种行为,…

你好 我正在尝试实现一个编辑器,页面的某些部分可以编辑/删除等(比如混合页面,有些元素是动态的,有些则不是)。 我用data-gjs属性来阻止静态元素上的这种行为,效果很好,但我似乎无法禁用容器元素本身的drop? 也就是说,我用fromElement: true绑定了我的实例到页面的正体元素,而data-gjs-droppable设置为false,但我仍然可以将块拖到页面的任意位置? 我是不是漏掉了什么,还是这是设计本意? 非常感谢 马克

mrobertshaw

这非常有帮助。 感谢您如此迅速的回复,以及您那出色、巧妙且设计精良的产品,这对我们的产品帮助巨大。

artf

你好@mrobertshaw,主元素是作为编辑器容器,而不是包装器。 如果你需要编辑包装器的道具,必须使用这个选项: “''js Grapesjs.init({ ... domComponents: { 包装:{ 可掉落:false, ... } } }) ```

ClaudeCode

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

#31682020年12月6日作者 oleteacher3 个回答
0 个反应

FEAT:下载/导出图片——喜欢在课堂项目中使用

你想给GrapesJS添加什么? 能够导出图片/图片文件夹的压缩包下载 详细描述你的功能需求详细 GrapeJS 是一个极好的工具,小学生可以用来创建自己的关于我页面。 不确定在压缩包下载中添加图片文件夹的功能有多难。请看CSS被导出。但IMG文件夹不行。 看了grapesjs-plugin-export / index.js,发现它在哪里添加了CSS,但我的JS水平不够好,无法添加图片导出。 提前感谢您的时间!

artf

你好@oleteacher,由于浏览器的安全限制(例如图片是从其他域名下载时),这样做并不完全可行。你需要一个服务器进程帮你生成图像。

oleteacher

是的,我们有教室本地服务器。我们没有自己的IT支持来帮忙处理这些问题,学校规模非常小 抱歉打扰你了。

ClaudeCode

谢谢你举报,@oleteacher。 关于FEAT:下载/导出图片——很喜欢在课堂项目中使用的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“cha...

#31662020年12月1日作者 nanaya14 个回答
0 个反应

复制粘贴节点的问题

*版本:0.16.27 你能重现演示中的bug吗? [ ]是的 [ ] 不 预期的行为是什么? 在右侧面板和画布中,粘贴的节点应该在复制的节点之后。 目前的行为是什么? 我复制一个节点。在views-container(右面板)中,粘贴的节点位于复制节点之后。但在画布中,粘贴的节点位于复制节点之前。如下所示: ![图片](https://user-images.githubusercontent.com/22161888/100718588-7c945780-33f6-11eb-9f8d-ef17fc192031.png) 详细描述那个漏洞 当 html 标签之间存在空格或回车时,就会出现这个错误。 因为在'grapesjs/sr...

artf

我试过本地设置,但节点位置是正确的。你能制作一个现场演示吗?

nanaya1

抱歉,我没有详细说明发生这个错误的具体情况。 Grapesjs自带的组件不会出现这个错误,因为它们没有空格、回车或制表符。 我在定制组件时遇到了这个问题。 我自己定制了很多组件,有些会遇到这种情况。 发现该问题的自定义组件节点初始化示例如下。 如果你想在 grapesjs 默认组件中重现这个问题,可以通过 f12 元素的“Editor as HTML”输入节点间空格。具体如下。 ![live_demo](https://user-images.githubuserconte...

nanaya1

@artf我不小心关闭了问题。

#31642020年11月30日作者 mcottret2 个回答
1 个反应

FEAT: 'grapesjs-plugin-ckeditor' 版本

你好@artf! 前段时间你们合并了以下PRs:https://github.com/artf/grapesjs-plugin-ckeditor/pull/39https://github.com/artf/grapesjs/pull/2977 与[本问题]相关(https://github.com/artf/grapesjs/issues/2916)。 有没有可能把“grapesjs-plugin-ckeditor”改成版本,这样修复就能包含进去? 提前感谢大家! 最新版本有替代方案吗? [ ] 是的 [ x ] 不 这是否与某个问题有关? https://github.com/artf/grapesjs/issues/2916

artf

完成! 抱歉,完全忘了这事 😬

ClaudeCode

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

#31632020年11月28日作者 MarksEliel4 个回答
2 个反应

专长:葡萄形状分割器

有没有适用于Grapesjs的GrapeDrop形状分隔插件? 有没有卖葡萄插件的网站?

MarksEliel

嗨,@MarksEliel 你拿到了吗? @Abhisheknanda1344463 哇,今天早上我收到了GitHub的通知,看到是你的链接,非常感谢,太棒了!恭喜你! 你想开发其他插件吗?

Abhisheknanda1344463

https://www.npmjs.com/package/grapesjs-shape-divider 供参考@artf

artf

没有。 无论如何,你只需要创建一个特性(作为道具),并在其变化后更新组件内容(例如用形状分隔器的SVG格式)

#31622020年11月27日作者 sashapawlow7263 个回答
0 个反应

按钮切换器到 editor.allowsCripts

你好,@artf!:)也许你能帮忙处理葡萄。我有按钮,里面有自己的脚本(比如点击打开模态窗口)。如果我设置属性allowScripts: 0,我可以编辑这些按钮,但如果editor.allowScripts == 1,按钮执行逻辑(例如打开模态窗口),我就无法编辑按钮。我找到了一个很好的解决方案——它的 switch 属性 allowScripts = 0 : 1,但更改只会在页面加载后应用。我该如何更换剧本?p.s 执行命令 editor.refresh() 在更改值 allow 后 allow 脚本不带来结果 ![Screenshot_24](https://user-images.githubusercontent.com/...

artf

我建议为这些按钮创建一个自定义组件,用脚本处理逻辑

sashapawlow726

@artf非常感谢!:+1:

ClaudeCode

谢谢你举报,@sashapawlow726。 关于按钮切换器到编辑器.allowsCripts的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“c...

浏览所有主题