#33372021年3月12日作者 wfcheng4 个回答
你好，我正在为学生开发一个解决方案，让学生通过Grapejs编辑器（类似Canva）制作幻灯片讲述他们的高中经历，并且已经将编辑器配置为“绝对”模式，效果非常好。 但我似乎找不到用方向键在编辑器里移动掉落方块的方法。 我知道自定义键位绑定，会考虑添加这个功能，但只是想看看我是不是遗漏了什么，有没有其他更好的选择。
artf
不，不幸的是，在这种情况下，自定义键位映射是唯一的解决方案。 你应该直接获取选中的组件并更新它的样式。
michaelhofer
我找到了一个可行的解决方案如下： 命令的添加如下： “moveSelectedElements”方法只需以下操作： 不过，当用方向键移动元素时，画布也会滚动，这是库巴默认的行为。 我们如何防止使用keymap（'e.preventDefault（）'））的默认传播？这应该是自动发生的，还是有办法配置？
sathudeva7
keymaps.add（'ns：my-keymap'， '⌘+s， ctrl+s'， 'some-gjs-command'， { 阻止默认浏览器操作 防止：正确， });
#33342021年3月11日作者 KernelDeimos2 个回答
版本： 0.16.44 你能重现演示中的bug吗？ [ ] 是的 [x] 不 预期的行为是什么？ 真的，其他任何东西都行 详细描述那个漏洞 我当时正试图将脚本加载到画布中。我第一次尝试是“脚本：[]”，然后遇到了这个PR帖子里提到的同步问题：https://github.com/artf/grapesjs/pull/67 我看到@artf的一个例子展示了另一种用一个叫“components”的属性来实现。这样做会导致JavaScript解析器失效。我不是开玩笑;我发了截图来证明。 还有一点有趣的是：控制台里写着“TAG LOAD”的文字来自我试图加载的脚本。所以......成功了吗？尽管页面因语法“无效”而崩溃。 目前的行为是什么...
KernelDeimos
我有一阵子没用内联“<script>''标签了，也忘了HTML解析器的这个限制。关上这个。
ClaudeCode
谢谢你举报，@KernelDeimos。 尝试将脚本加载到Canvas时，可能会破坏JavaScript的问题？？ 似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSa...
#33292021年3月10日作者 imouou4 个回答
你好，@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'））; }, }, // ... }); ```
#33262021年3月9日作者 devtechk3 个回答
大家好，与其用这种方式在首页造型...... 有可能在Canvas中使用SCSS文件吗？canvas { style：['FILE.SCSS'] } 还是用一个初始化CSS让它更干净？ 谢谢！ ' myComponent.append（<style> 正体 { 背景：RGB（204,204,204）; } .footer { 位置：绝对; 底部：5毫米; 宽度：自动; 左侧：5毫米; 右侧：5毫米; } .footer-container { 填充：7像素88像素 7像素96像素; } .footer-text：nth-child（2） { float：right; } .footer-text { 字体大小：11px; } .l...
artf
如果你不想用文件，可以用 [canvasCSS 选项]（https://github.com/artf/grapesjs/blob/da98f1905c6b9c691793685a7f4e21f109a8843e/src/editor/config/config.js#L77）。
devtechk
非常感谢！这个配置文件对我帮助很大！
ClaudeCode
谢谢你举报，@devtechk。 关于canvas风格CSS的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something chan...
#33192021年3月5日作者 anatoli-dp3 个回答
版本： 现在？ 你可以在控制台输入“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...
#33102021年3月5日作者 Andrew-Chen-Wang3 个回答
版本： 演示版中的那个 你能重现演示中的bug吗？ [X] 是的 [ ] 不 预期的行为是什么？ 移动端和平板视图在窗口缩小时应该会调整画布大小。 详细描述那个漏洞 桌面视图在调整窗口大小时会正确调整画布大小 目前的行为是什么？* 当窗口在移动端和平板视图中缩小到一定宽度以下时，画布不会变大。面板随后覆盖了画布。这在桌面视图中不会发生，只有在移动端和桌面视图中才会出现。 详细描述那个漏洞*** 桌面视图在调整窗口大小时会正确调整画布大小。但只有桌面视图。移动端（包括竖屏和横屏）和平板视图不会调整大小
Ju99ernaut
“移动”和平板“设备是像素延迟的，所以它们只是根据窗口大小调整画布大小到一定像素数。我记得“桌面”只是把Canvas设置为100%。
artf
正如@Ju99ernaut提到的，这就是设备的工作原理。 说实话，我甚至不明白为什么要调整窗口大小？ 你还可能开始看到或更新与正确设备无关的样式，这肯定会让人困惑。
ClaudeCode
谢谢你举报，@Andrew陈旺。 平板和移动视图无法调整大小的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报...
#33052021年3月3日作者 RaresVlaiduc3 个回答
版本：v0.16.41 你能重现演示中的bug吗？ [ ] 是的 [x] 不 预期的行为是什么？ 当我点击按钮时，应该会添加 gjs-pn-active 类。 详细描述那个漏洞 我有三个按钮分别对应三台不同的设备（台式机、平板和手机）。 我把它们放在顶部面板上，点击时画布大小会变，但点击的按钮没有被设置为激活。 你能附上截图、截屏或实时演示吗？** [x] 是的（附上） [ ] 不 ![图片]（https://user-images.githubusercontent.com/73160095/109790439-164bea80-7c1a-11eb-9aeb-98954166afa2.png） ![图片]（https://use...
Ju99ernaut
Grapesjs要求你的命令有“运行”和“停止”功能，才能自动切换面板按钮，所以这可能是问题所在： “''js const cm = 编辑。指挥; Grapesjs 无法在此命令格式下切换面板按钮 cm.add（'desktop'， e => e.setDevice（'Desktop'）） Grapesjs 能因为运行和停止而切换面板按钮 cm.add（'desktop'， { run（e） { e.setDevice（'Desktop'） }, stop（） {} });...
kerryj89
@Ju99ernaut 谢谢你。 现在通过 'grapesjs.init（）' 创建 'devices-c' 面板时，active 状态对我来说是正常的。
ClaudeCode
谢谢你举报，@RaresVlaiduc。 （v0.16.41） 按钮点击时未被设置为激活的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助...
#32952021年3月1日作者 marcepoblet4 个回答
版本： v0.16.41 你能重现演示中的bug吗？ [ ] 是的 [ ] 不 预期的行为是什么？ 当我们有一个属性为 data-gjs-draggable 的 false 按钮时，这个按钮不应在画布中被拖动。 详细描述那个漏洞 步骤将带有可拖拽属性的按钮组件设置为 false将按钮拖入其他组件内拖动按钮 目前的行为是什么？ 步骤将带有可拖拽属性的按钮组件设置为 false将按钮拖入其他组件内按钮不应拖动 你能附上截图、截屏或实时演示吗？** [ ] 是的（附上视频） https://user-images.githubusercontent.com/64096863/109490335-da245880-7a66-11eb-81...
artf
我猜你做错了什么，你是怎么创建这些组件及其属性的？你甚至不应该在检查员里看到这些属性。
marcepoblet
@artf 我们的准则中没有做任何更改。唯一的区别是我们更新了GrapesJs的版本。 之前我用的是v0.16.18版本，运行正常，但现在我们把GrapesJs更新到v0.16.41后，按钮功能就不行了。
marcepoblet
我们用以下方式设置属性： editor.getSelected（）.attributes.attributes[“data-gjs-editable”] = 'false' editor.getSelected（）.attributes.attributes[“data-gjs-copyable”] = 'false' editor.getSelected（）.attributes.attributes[“data-gjs-droppable”] = 'false' edi...
#32852021年2月21日作者 ashercoren4 个回答
嗨。 这个问题已经被问过两次（[这里]（https://github.com/artf/grapesjs/issues/973）和[这里]（https://github.com/artf/grapesjs/issues/1230）），但从未有过答案。 有没有办法在画布iframe的开头加上'<！DOCTYPE html>'，这样iframe就会进入标准模式？ 我需要这个，因为我想用tinyMce作为自定义RTE，而tinyMce需要标准模式。
artf
在下一个版本中，我会添加一个新的事件辅助工具，允许在加载前编辑 iframe 内容： “''js editor.on（'frame：load：before'， （{ el }） => { const doc = el.contentDocument; 文档开启（）; doc.write（“<！DOCTYPE html>”）; 文档关闭（）; }); ```
bgrand-ch
你好， 对于未来的问题或技术问题（非漏洞），GitHub的[讨论]（https://github.com/artf/grapesjs/discussions）标签是最佳选择。 如果问题已解决，请关闭，或在[讨论]（https://github.com/artf/grapesjs/discussions）->[问答]（https://github.com/artf/grapesjs/discussions/categories/q-a）类别写一条详细的新消息（并关闭本期）。...
artf
不太有，但我愿意听听如何让它可自定义的解决方案。
#32802021年2月19日作者 bgrand-ch1 个回答
你想给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：*”事件进行细致跟踪 构建一...