PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 183 个问题
🔍 documentation图书馆很棒！它满足所有要求，唯独有一个：网站文本翻译。 我在议题队列和文档中翻遍了各种地方，但不知为何找不到关于这个话题的任何信息。我的客户不在乎 grapesjs 编辑器是英文的。他们想要的是能够轻松地将文本翻译成网站的任意语言。 如果首页页头写着“欢迎访问我的网站”，他们会希望有一个简单的选项：将鼠标悬停在该文本，点击下拉菜单，然后点击翻译，可能会弹出弹窗，将该行翻译成法语或其他他们想用的网站语言。当然，访客还需要一个语言下拉选择器。 有类似的吗？如果不行，这种插件的粗略结构应该是什么？
artf
这需要你自己去做。也许可以自定义文本组件，这样可以根据所选语言更改内容。
jordandevogelaere
@acondura你有解决办法吗？我对我的客户也有同样的要求。 谢谢
gxanshu
我也有同样的要求。是的，我们唯一能实现这一点的方法就是创建自己的组件
你好， grapeJs 启动，我通常会加载函数调用并附加内容到 gjs div， $.Ajax（{ 类型：“GET”， 网址：” processData： false， contentType： 'application/json;charset=utf-8'， DataType：“json”， $.each（data， function （key， data） { $（'#gjs'）.append（html）; } }); 我的问题是，保存内容后，重新加载同样的功能调用不起作用。 如何简单调用保存/加载功能？ 请指引我
artf
https://grapesjs.com/docs/modules/Storage.html
GJSBlock
感谢你报告，@san-123。 关于远程存储问题的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命...
警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本： 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗？ [ ] 是的 [ ] 不 预期的行为是什么？ 详细描述那个漏...
GJSBlock
谢谢你举报，@nithinpillalamarri123。 如何自定义 grapes js form以附加样式的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： 检查初始化顺序 — 确保组件在操作前已完全加载 使用编辑器的事件系统 — 收听完成事件： 推荐的下一步步骤： 如果还没测试，请用最新的 GrapesJS 版本测试 提供最小可重复的示例（CodeSa...
版本： 0.16.27 你能重现演示中的bug吗？ [ ] 是的 [ ] 不 [X] 视频但没有演示 预期的行为是什么？ 添加尽可能多的嵌套“span”元素，并保留它们的样式/ID。 目前的行为是什么？ 从两个嵌套的“span”元素中，父“span”元素的样式/ID会消失。 你能附上截图、截屏或实时演示吗？ [X] 是的（附上） [ ] 不 https://user-images.githubusercontent.com/17108974/106736579-e9ee7f80-6615-11eb-9f5e-a3236d026c98.mp4 TextEditor.vue “''js // ... 方法：{ onButtonClic...
artf
你好，Benjamin，这个bug已经修复了（报告bug时，请确保使用最新版本）
GJSBlock
谢谢你举报，@bgrand-ch。 v0.16.27 - 嵌套 span 时样式/ID 消失的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这...
你好， 我有一个自定义组件，我们称它为Section Block。我想防止用户在其他区块里丢弃分段块。这可能吗？ 参考：https://grapesjs.com/docs/modules/Components.html#define-custom-component-type 我知道可以在新的组件类型上定义可拖拽的选项。我对这些选项的理解是包容的。 有没有办法让可拖拽的排他性，比如我说“这个方块可以丢弃在除[[组件类型]]以外的任何地方”？
artf
你可以用 '：not（）' 选择器，比如'：not（.except-this-class）'
stljeff1
谢谢@artf。这个方案大致上奏效。现在我遇到了一个新问题，一些占位符文本消失了。 在我的模块内部的某些元素中，我会有一个带有文本节点的HTML元素，然后是另一个嵌套的HTML元素。例如，包含图标的链接标签。 当我在组件模型中添加可拖曳选项时，块内类似上述A标签的HTML元素会失去文本节点。如果我用类似span标签的方式包裹这些文本节点，文本会保留。不变的元素示例： 你知道有什么方法会导致文本节点出现在与其他元素一起的容器中时消失吗？ 以下是我创建自定义组件的方式： 如果这...
artf
你用旧的API定义组件，这需要其他东西才能正常工作，这可能是问题的原因（我自己试过，一切正常）。请在这里查看正确的 API https://grapesjs.com/docs/modules/Components.html#define-custom-component-type
警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本： 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗？ [ ] 是的 [ ] 不 预期的行为是什么？ 详细描述那个漏...
kumarabhishek008
问题已解决
GJSBlock
谢谢你举报，@kumarabhishek008。 封装组件的背景图像在更新时第二次加载不出来的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这...
我想指定拖拽元素的位置。比如，如果我有一个标题块，无论你拖到哪里，它都应该放在文档顶部。我该怎么做？
RutujaBadbe
把标题块放进画布后，我需要它放在任何其他组件/块的顶部。目前，我正在这样做。但这并没有奏效。 editor.on（'canvas：drop'，（DataTransfer， model）=> { 如果 （model.is（'头部'））） { VAR指数 = 0; editor.getComponents（）.add（model， {at： index}）; } })
artf
你可以用“可拖拽”属性（通过CSS查询字符串）定义组件可以放置的位置，但不能指定位置。 你可以尝试创建一个自定义组件作为容器，存放像 header 这样的组件，并且始终用这些容器初始化你的模板。然后你的头部可以用以下方式使用可拖拽属性：'draggable： '[data-gjs-type=“header-container”]'，'，
RutujaBadbe
@artf谢谢你的回复。我不知道这是不是正确的方法，但我做了一件事，对我有效。我对这方面还很新，还在从文档中学习。 我做了这个—— editor.on（'canvas：drop'，（ model）=> { if （model.is（'header'）） { //created custom component type header const wrapper = editor.getWrapper（）; const el = wrapper.find（'header'）[...
我想创建一个新的自定义特性来使用，它包含颜色选择器的输入和一个复选框，这样最终结果要么是从勾选的复选框中获得的预定义颜色，要么如果未选，则选择从选取器中选出颜色。这对我来说太具体了，所以我的问题是，创建新特质时是否可以使用已有的特质类型。我是直接从文档里说的，可能漏掉了什么，但没提到，所以我很好奇，提前谢谢大家！
artf
目前没有，我正在开发一个新的UI模块，可以重用和覆盖内部UI元素。
GJSBlock
谢谢你举报，@ThetripGr。 关于可以在新的自定义特质中使用现有特质类型吗？这是个很好的问题。（例如，选色器）。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.l...
版本：0.16.34 预期的行为是什么？ 编辑器初始化时，没有选择任何元素，因此样式管理器应像编辑器配置中未使用“appendTo”时一样，提示“使用样式管理器前选择元素”。 目前的行为是什么？ 在编辑器配置中使用“appendTo”时，像这样： 样式管理器开始时显示所有扇区，但未选择任何元素 演示 同样的行为也可以在 https://grapesjs.com/docs/getting-started.html#style-manager 的例子中看到
mosh-tudor
我用这段代码来解决这个问题： “''js const showStylesSector = editor => { const stylesButton = 编辑器。Panels.getButton（“panel-sidebar-header”， “show-styles”）; const layersButton = 编辑器。Panels.getButton（“panel-sidebar-header”， “show-layers”）; 如果图层管理器处于激活状态，请禁用...
Nielsticot
这不是我想要的，我的问题是在选择任何元素之前，也就是在触发“component：selected”事件之前。 我通过在编辑器加载时选择一个元素暂时解决了这个问题，但这并不是我真正想要的
artf
如果你在自定义元素中使用 StyleManager，那你必须自己处理那个状态。 '''html <div class=“sm-wrapper”> <div id=“styles”></div><!-- 这里是你添加样式管理器 --> <div class=“sm-empty-state”> 选择一个元素 </div> </div>
摘自 https://github.com/artf/grapesjs/blob/dev/src/editor/index.js#L33'component：update' - 当组件被更新（移动、样式等）时触发，模型作为参数传递给回调 重现这个bug使用“move”API 移动组件https://grapesjs.com/docs/api/component.html#move点击箭头上/箭头下按钮https://codesandbox.io/s/charming-mendel-ivrlz?file=/index.html ![图片]（https://user-images.githubusercontent.com/17810...
GJSBlock
谢谢你举报，@AnnaSu。 “component：update”在组件移动时不触发的问题，似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于...