GrapesJS 问题

mingxin-yang

https://grapesjs.com/docs/modules/Components.html#define-custom-component-type，这个？@artf

artf

要一键启用富文本编辑器，可以通过这种方式扩展原始文本组件 “''js 编辑。Components.addType（'text'， { 浏览量：{ 事件：{ input： 'onInput'， // 保留原始的 on input 事件，该事件更新 RTE 工具栏位置 点击：“enableRte”， }, enableRte（） { this.onActive（） } }, }); ```

artf

我建议创建一个自定义组件，并将“removable”属性设置为“false”

artf

嘿@Joshmamroud这里其实有个关于文本成分的普遍问题 #2771

Joshmamroud

谢谢你，@artf。我觉得我的问题更多是自定义组件，它扩展了文本组件。Textable在原始文本组件中工作正常，但当我尝试创建自己的自定义文本组件时，就遇到了问题。不仅仅是Textable，我注意到扩展文本组件也会失去一些其他功能。我现在一时想不起具体的。是不是我在扩展文本部分方面做错了什么？

artf

从你的演示来看，我没看到扩展的“文本”部分有问题，只有与文本相关的问题

artf

是的，你说得对，实际上没有选择默认设备的选项...... 目前作为变通方法，先在初始化后手动操作： “''js const editor = grapesjs.init（{...}）; editor.setDevice（“移动”）; 在下一个版本中，我会在设备管理器配置中添加“默认”选项 “''js deviceManager： { 启动时选择的设备“id”如果未标示，将使用“设备”中最先可用的ID。 默认：“移动”， 设备：[...]， }, ```

GJSBlock

谢谢你举报，@imouou。 设备宽度默认无效的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告中包含 Gr...

GJSBlock

谢谢你举报，@rywilson28。 徽章“即使元素下方有空间，也可能遮挡元素内容，这似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更...

artf

我在这里发了一个变通方法 https://github.com/artf/grapesjs/issues/3693

artf

嘿，@sriya-srinivasan，你能做一个可复现的演示吗？

artf

@sriya-Srinivasan，有什么最新进展吗？

artf

使用组件优先样式 “''js Grapesjs.init（{ ... 选择经理：{ componentFirst： true， ... }, }) ```

GJSBlock

谢谢你举报，@imouou。 option resizable：true 会改变 Canvas 中所有相同的组件。 似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSa...

artf

我不太明白你的问题，具体是怎么移动/缩放画布的？这无关，但有没有功能可以调用来缩放内容，而不是画布？比如我想放大，比如放在某个非常高DPI的页面上，以便更好地编辑。还是应该手动调整iframe缩放？因为iframe放大当然会放大工具/选择轮廓 ['编辑。Canvas.setZoom']（https://grapesjs.com/docs/api/canvas.html#setzoom）在你这种情况下不起作用吗？

anatoli-dp

我用编辑器来调整。用Canvas.setZoom，然后用空格键移动它。目前我移除了之前做过的部分，但大概是拿到画布元素，然后通过样式更新来定位它。不过这种变化不是永久性的，只要稍微移动，它就会跳回原位，比如如果它在26xx、18y（或26上、18左）的位置，稍微移动它会跳回那些坐标，而不是如果它是从0,0开始移动，如果它是天边。有没有什么功能可以把画布位置重置回视角中心，并重新缩放到100%？

artf

如果你说的是移动坐标，我们还没有直接的 API，但你实际上可以通过这种方式获取或更新坐标： “''js const canvasModel = editor.Canvas.getModel（）; 获取数值 const { x， y } = canvasModel.attributes; 更新数值 canvasModel.set（{ x： x + 50， y： y + 50 }） ```

artf

我就结束这条了，因为你已经在这里开启了讨论区 https://github.com/artf/grapesjs/discussions/3666

GJSBlock

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

MrNikolovski

这@artf有什么新进展吗？

MrNikolovski

你好，@artf。能给我一个关于这个问题的最新进展吗？你觉得这是个小问题，还是没时间去处理？ 谢谢。

artf

我现在正在改进StyleManager，可能很快就能检查到。

artf

@aliibrahim123如果你不指定任何类型，会创建一个简单的文本类型属性:)

aliibrahim123

你好 我做了一个简单的文本代理类型 这是代码 styleManager.addType（'text'， { create（{ props， change }） { const el = document.createElement（'div'）; el.innerHTML = '<input type=“text” class=“my-input” />'; const inputEl = el.querySelector（'.my-input'）; inputEl.add...

GJSBlock

谢谢你举报，@aliibrahim123。 关于FEAT： style manager文本类型的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“c...