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）命令

artf

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

GJSBlock

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

skbhagat40

即使我做了 'selectedElement.getTrait（'href'）.set（{value： 'fb.com'， target： '_blank'}）

skbhagat40

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

skbhagat40

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

ThetripGr

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

artf

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

GJSBlock

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

mrobertshaw

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

artf

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

GJSBlock

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

artf

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

oleteacher

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

GJSBlock

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

artf

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

nanaya1

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

nanaya1

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

artf

完成！ 抱歉，完全忘了这事 😬

GJSBlock

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

MarksEliel

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

Abhisheknanda1344463

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

artf

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

artf

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

sashapawlow726

@artf非常感谢！:+1:

GJSBlock

谢谢你举报，@sashapawlow726。 Great suggestion about Button switcher to editor.allowsCripts! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. 使用事件系统： 替代方法： 听取 CSS 选择器更改的 selector:add 使用 se...