PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 466 个问题
🔍 components通过点击Canvas内的组件，能否更改复选框组件简单中的“勾选”特性？
artf
是的，当然，性状读取的是组件模型的值，所以如果你更改绑定值，性状应该会改变
GJSBlock
谢谢你举报，@christosapos。 关于通过点击“组件内部”更改复选框组件特征的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethin...
我想添加一个特征的指示。 我的组件有以下特性： 对于类型“dateformat-indication”，我创建了以下类型： 然而，即使它不在模板里，我还是会收到我创建的输入： ![git]（https://user-images.githubusercontent.com/58575867/113580735-07dc5e80-961e-11eb-8c6d-a24052984d05.png） 有没有办法禁用该特质的默认输入？
ahmedderkaoui
使用以下方法效果很好：
GJSBlock
谢谢你举报，@ahmedderkaoui。 关于FEAT：在不输入的情况下添加指征作为特质的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something ch...
你好，artf，感谢你打造了这样强大的定制CMS工具。 我正在项目中实现一个新页面功能，所以我用你的参考来切换组件，但出现了错误，请问能否指导我如何在面板点击“添加新页面”按钮时构建新页面？ 这是我的代码
Ju99ernaut
我觉得数组不是存储页面对象的最佳方式，所以运行数组操作获取页面并加载页面对调用栈来说可能太繁琐了。你应该考虑只在需要时才把页面加载到内存里，并存储在类似数据库的环境中，而不是数组。你可以试试这个插件 https://github.com/Ju99ernaut/grapesjs-template-manager
artf
我不确定你那边的情况，但我建议关注#3206，因为内置页面管理器快准备好了（我会更新那个问题）
GJSBlock
谢谢你举报，@pranay2210。 关于在组件间切换会导致最大调用堆栈大小错误的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*...
版本： 0.16.45 你能重现演示中的bug吗？[ ] 是的[x] 不 预期的行为是什么？ 不应该有空文本。 目前的行为是什么？ 在将数据保存到数据库并检索（参见附带组件对象）后，空数据会出现。 这就是我分配来自数据库组件的方式 “''js this.editor = grapesjs.init（{ 容器：“#gjs${this._uid}'， 插件：[类型]， fromElement： false， 高度：这个。高度， 宽度：“自动” storageManager： false， 资产管理人：{ 资产：this.assets， 上传文件：this.uploadFile }, noticeOnUnload： false， com...
artf
看起来是你这边的问题，因为我无法复现（也许你后台操作有误？！）。先尝试创建一个可复现的演示（通过使用localStorage）
GJSBlock
谢谢你举报，@dluague。 保存后*无文本的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告中包含 Gr...
大家好， 首先，我想表达对这个惊人工具的感激之情。我基于文本组件做了扩展按钮组件，这样可以手动编辑按钮内容，而不使用特质。 扩展按钮组件的代码如下： var comps = 编辑器。主导组件; var defaultType4 = comps.getType（'text'）; 编辑。DomComponents.addType（'button'， { 模型：{ 默认值：{ 标签名称：“button”， 类：['.pointer']，//悬停时添加点击指针， }, }, 扩展：“文本”， isComponent： 函数 （el） { 如果 （el.tagName === 'BUTTON'） 返回 {type： 'button'}; }...
artf
看起来空格会触发 Chrome 中的“点击”事件。解决办法似乎是在“keypress”时添加 preventDefault https://stackoverflow.com/questions/22104860/chrome-firing-onclick-when-space-typed-in-contenteditable-button 附言：避免那样扩大视野。默认情况下，当你使用某种类型的“extend”时，它也在扩展视图（如果你需要扩展另一个组件的视图，可以用“ex...
GJSBlock
谢谢你举报，@christosapos。 关于无法基于文本组件添加扩展按钮组件空格的好问题。。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something chang...
我正在尝试用 set 函数来更改组件的内容，但实际上结果是一个空组件，内部什么都没有。 这是一个代码总结的示例 使用版本：0.16.44 预期的行为是什么？ 执行的代码应生成一个包含文本“foo”的组件。 目前的行为是什么？ 执行后的代码会清空组件内容。 在0.16.34版本中，一切正常运行。 这个问题有解决办法吗，还是我应该继续用0.16.34版本？
artf
你不应该使用“content”属性，应该用“selectedComponent.components（str）”。
GJSBlock
谢谢你举报，@nairdapuiu。 关于Set content function清空组件内容，这个问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethi...
我如何在此事件中禁用模型拖拽按钮：
artf
如果你说的“模型拖拽按钮”是指工具栏上的按钮，你应该更新“toolbar”属性，比如： “''js model.set（'toolbar'， [{ 属性：{ 类别：'fa fa-trash-o' }， 命令：“TLB-删除” }]) ```
GJSBlock
谢谢你举报，@qweiop801。 感谢你分享关于Set Model property.的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节，维护者可以更快地识别和优先排序...
你想给GrapesJS添加什么？ 每个版本的未压缩版本 详细描述你的功能需求详细 我正在使用一些更复杂的方法，使用组件管理器。 最后一个未压缩的“调试”版本是 0.15.xx。 能否同时发布未压缩版和压缩版，以便能进入代码？ This请求来自我试图向同事解释addComponent功能的工作原理，但无法完整解释，于是我试图进入代码，却发现没有未压缩版本existed 最新版本有替代方案吗？[ ] 是的（描述替代方案）[X] 不 - 我想用最新版本，而不是旧版本来实现这个功能 这是否与某个问题有关？[ ] 是的（请提供本期链接）[X] 不
artf
你好@mitcht当前的捆绑包包含了压缩文件，同时也包含了源码映射，所以你可以很容易地通过开发工具查看原始代码（更多内容见这里，[https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps）]），因此如果你需要调试代码，没有必要同时包含未压缩版本。 你的情况呢？我觉得直接展示源代码（在Github上）更有信息量。
GJSBlock
谢谢你举报，@mitcht。 最新版本中FEAT：未压缩版本的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报...
版本： 最新 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗？[X] 是的[ ] 不 预期的行为是什么？ 带有空体的组件不应被填充默认内容。 目前的行为是什么？ 当我们创建一个空节点并用 setComponents（） 作为输入传递给 GrapesJS 时，如果标签主体为空，扩展 TextNode 的组件会添加默认内容。 详细描述那个漏洞** 当我们创建一个空节点并用 setComponents（） 作为输入传递给 GrapesJS 时，如果标签主体为空，扩展 TextNode 的组件会添加默认内容。我们有用例，有些标签可能是空的。有没有办法通过 setComponents 插入禁用它？...
artf
你在组件定义中定义了默认的“内容”，所以空的定义会用它作为默认。 只需将那个“内容”从组件定义中移动到“段落”块。
harsh201
@artf 有人能帮帮忙吗？
harsh201
谢谢@artf！完全忘了要在方块层面添加。
你好，感谢你帮我解答这个问题。我想用自己的JSEditor来编辑html、css和js。 1、首先，我用 'getHtml'， 'getCss'， 'getJs' 在我的 JSEditor 里显示代码。我发现JS代码是压缩的。我怎样才能获得无压缩代码？ 我用的是'编辑器'。CodeManager.getCode（model， 'js'）'，而且它也是压缩版的。我看了源代码，也不太明白为什么 CodeManager 能显示无压缩代码。 2、还有一点是：当我设置JS代码，比如“document.getElementById（”wrapper“）.style.background = ”red“'时，并做以下操作： 'const htm...
artf
组件用JS的“脚本”依赖于你源代码中的同样代码。比如，如果你创建了一个插件，然后用webpack/babel构建它，组件就会打印构建结果。我想你可以为你的“脚本”组件单独创建 js 文件，然后让捆绑器忽略那些文件。
xinnai
@artf 你好，我不确定你是否理解我的问题。 我想在我自己的 js 编辑器里编辑 js 代码，首先我用 'getJs（'） 从你的编辑器里设置了 js 代码，但你demo.html里看起来是这样的： ![1444126130]（https://user-images.githubusercontent.com/23135336/112428513-3b91cb80-8d76-11eb-91de-ce51a8500203.jpg） 这些代码都是压缩的。我想要像这样一个未压缩...
artf
“autoBeautify” 是传递给 CodeMirror 的一个选项，但无论如何，它可能会美化代码，但不会解压，因为代码本身就是这样存储在组件里的