#37132021年8月18日作者 shkhalid3 个回答
我在尝试保存一些组件（包括一些脚本）并重新加载页面时遇到了一些问题，组件渲染不正确。显示的是空盒子。 举个例子：当我尝试从“jvas28/grapesjs-echarts”保存图表组件并重新加载页面时，会出现这种情况 <img width=“1438” alt=“截图 2021-08-18 下午4点20分” src=“https://user-images.githubusercontent.com/8138036/129891078-2191094d-d735-4178-9859-588f774120b6.png”> 这是示例应用 https://codesandbox.io/s/cranky-wescoff-93pxd?fil...
shkhalid
谢谢@artf！ 最后我终于弄明白了 问题出在“tagVarStart”和“tagVarEnd”。评论完后它开始起作用了
artf
@shkhalid谢谢你的报告，但在这个仓库里，你应该打开可重现的问题，不使用外部插件，因为问题可能出在插件本身。至少就我对核心的判断来看，如果按照这个[指南]（https://grapesjs.com/docs/modules/Components-js.html）正确实现，组件中没有问题。
ClaudeCode
谢谢你举报，@shkhalid。 关于用脚本存储的组件无法正确渲染的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件...
#37122021年8月17日作者 aliibrahim1232 个回答
当块管理器打开时，任何人都知道如何执行某个函数
artf
如果你用默认命令显示/隐藏方块，可以通过“编辑器”来实现。Commands.isActive（'open-blocks'）'
ClaudeCode
谢谢你举报，@aliibrahim123。 关于帮助：如何判断区块管理器面板是否打开，这个问题很棒。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somet...
#37072021年8月16日作者 denisoed1 个回答
GrapesJs 是最好的页面构建器！：心： 抱歉，我是GrapesJs的新手。 我可以支持Vue组件吗？
ClaudeCode
谢谢你举报，@denisoed。 关于是否可以设置Vue组件的渲染？的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细...
#37042021年8月13日作者 throne19864 个回答
我正在用以下代码来折叠所有块类别，但很遗憾，这方法不起作用 现场演示：https://jsfiddle.net/d4702yoh/2/ 这里出了什么问题？
artf
这应该够了，'编辑'。Blocks.getCategories（）.forEach（ct => ct.set（'open'， false）''，但类别是在渲染块时才创建的（默认情况下，点击Blocks标签时），所以渲染完后你只需执行该脚本。
ronaldohoch
你好，我已经让所有模块都用一个插件关闭了，试着适应你的情况。 “JavaScript 导出默认（编辑器，opt = {}） => { const 命令 = 编辑器。指挥; Commands.add（“dina：hide-all-blocks”，（editor）=>{ 编辑。Panels.getButton（“views”，“open-blocks”）.set（“active”，1）; 令categories = 编辑器。BlockManager.getCategories（...
throne1986
“''jsconst 命令 = 编辑器。指挥;Commands.add（“dina：hide-all-blocks”，（editor）=>{编辑。Panels.getButton（“views”，“open-blocks”）.set（“active”，1）;设类别=编辑器。BlockManager.getCategories（）.models;categories.map（elem=>{elem.view.$el.css（“显示”、“无”）; }); })``` 这里还是一...
#37032021年8月13日作者 anatoli-dp2 个回答
警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本： 最新发布 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗？[ ] 是的[ ] 不 预期的行为是什么？ 如果有一...
anatoli-dp
请注意，这个问题很糟糕......现在看到它，我觉得自己很傻......ID不能以数字开头，我做这个时没考虑到这一点
ClaudeCode
谢谢你举报，@anatoli-DP。 自定义ID在CSS中注入\3，\3后面有空格的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队...
#37022021年8月13日作者 throne19861 个回答
我正在使用 [grapesjs library][1] 来构建网页，我根据文档添加了一个自定义块 [这里][1]，当我拖动块到 canvas 时，HTML 数据会被添加，但 '<head></head>' 标签是空的， 这是我的代码 function tempOnePlugin（editor） { 编辑。BlockManager.add（'my-first-block'， { 标签：'<i class=“fa fa-clone”></i>'， 内容：'<！DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-8”> <title>Vmmerce模板</title> <me...
ClaudeCode
谢谢你举报，@throne1986。 关于*HTML头部标签未添加到dom的问题很棒。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethin...
#37002021年8月12日作者 anatoli-dp3 个回答
警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本： 目前，我会更新每次发布 你能重现演示中的bug吗？ 使用自定义编辑器，因为我需要自己制作组件[ ] 是的[ ] 不 预期的行为是什么？ 将组件设置为可拖...
artf
这里的字符串本应是查询字符串，所以它尝试查询一个“封装”标签，而显然这个标签不存在。编辑器会在帧中的所有组件附加“data-gjs-type”属性，所以你能用的查询是“可拖拽：”[data-gjs-type=wrapper]''
anatoli-dp
啊，现在明白多了......谢谢，问题解决了
ClaudeCode
谢谢你举报，@anatoli-DP。 设置可拖拽：'wrapper' 不会在 wrapper 中掉落的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbo...
#36942021年8月11日作者 codingmachine161 个回答
@artf 这是我的代码，我在 select change 时在 div 里添加 test init（） { this.listenTo（this，“change：noOfLinks”，this.getInfoLinks）; }, getInfoLinks（） { let canvasDoc = 编辑器。Canvas.getDocument（）; canvasDoc.getElementById（“infoLinks”）.innerHTML = “test text ”; editor.trigger（“change：selectedComponent”）; 编辑。TraitManager.getTraitsViewer（）.re...
ClaudeCode
谢谢你举报，@codingmachine16。 关于问题：动态变更在从数据库加载时消失，这个问题非常好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'som...
#36932021年8月11日作者 GaikwadShubham3 个回答
版本： 你可以在控制台输入“grapesjs.version”获得版本 0.17.22 你能重现演示中的bug吗？[x] 是的[ ] 不 预期的行为是什么？ 应该能以类似 grapesjs 容器外的方式看到网页组件 详细描述那个漏洞 Grapesjs 无法从可构造样式表渲染 CSS。 目前的行为是什么？ 能够在不样式的情况下加载组件 你能附上截图、截屏或实时演示吗？**[x] 是的（https://codesandbox.io/embed/frosty-payne-3fhd7?fontsize=14&hidenavigation=1&theme=dark）[ ] 不 CodeSandbox 入门模板 https://codesan...
artf
这个问题是由于 AdoptStylesheet 的工作方式，类似于 lit-element 的这个（https://github.com/lit/lit-element/issues/1139）。 基本上，你不能在多个文档中共享同一个CSSStyleSheet，所以必须手动重新创建，下面是一个自定义元素的代码，以支持adoptedStyleSheets。 “''js 编辑。Components.addType（'custom-element'， { isComponent：...
vasicvuk
有没有什么解决方案可以让lit-element components 3.X配合grapesJS使用？
ClaudeCode
谢谢你举报，@GaikwadShubham。 AdoptStylesheet 在 grapesJS 中不支持的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSan...
#36902021年8月10日作者 throne19861 个回答
我有一个基本的例子如下 HTML <div id=“gjs”> <div class=“traits-container”></div> <div style=“padding： 25px”>Hello World!!</div> </div> <h1> 附加特质管理器 </h1> <div class=“traits-container”></div> J const editor = Grapesjs.init（{ 容器：“#gjs”， fromElement： true， 身高：“100%”， storageManager： false， traitManager： { appendTo： document.querySel...
ClaudeCode
谢谢你举报，@throne1986。 关于附进“不使用特质经理的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something cha...