PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 466 个问题
🔍 components你好@artf 我尝试用复选框特性更新样式，但它没有调用函数。 这是代码 非常感谢你能提供的任何见解！ 谢谢
Abhisheknanda1344463
@artf 搞定了，傻乎乎的——错误 移动模型中的初始化函数。 结案
GJSBlock
谢谢你举报，@Abhisheknanda1344463。 关于如何从复选框特性更新样式？的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'...
https://user-images.githubusercontent.com/64096863/104047608-af352b00-51c0-11eb-8261-1d7ae9277d25.mp4 当你双击任何文本组件并进行写入或修改时，参数“changesCount”不会被递增。 对于按钮/图片组件，参数“changesCount”是递增的，且工作正常。 我附上了一个视频，展示了这种行为。 我在 0.16.27、0.16.30 和 0.16.34 版本中都能重现这个错误。在旧版本中，这个问题不会出现
artf
谢谢@marcepoblet修复已经准备好下一次发布了
marcepoblet
谢谢@marcepoblet修复已经准备好，下次发布时会有修复 谢谢！@artf，你对上映日期有个估计吗？
GJSBlock
谢谢你举报，@marcepoblet。 changesCount 没有递增的问题，当应用到任何文本组件时，似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox...
我一直在玩 GrapesJS，并尝试把它集成到 Symfony 5 的项目中。特别是，我希望能够在编辑器中编辑基于Bootstrap 4和其他组件（如FontAwesome Pro）的模板，以及基于这些的自定义块。 我用Symfony的Webpack-Encore捆绑包来生成应用程序的脚本和样式文件，这让当前的iframe画布系统用同样的版本化组件（如Bootstrap等）工作非常头疼。 目前我只能通过初始化配置向画布注入样式和脚本URL，比如这样： 问题是我想保留与主应用中包含组件版本完全相同的版本。如果我升级这些，我希望它能反映在画布使用的组件中，这可能还包括自定义代码和样式。 在 SymFony 和其他主要框架中，链接根资源...
ianef
真是太遗憾了。我没说要从其他网站取用，我想做的是保持和项目其他部分的一致性。 算了，我还是继续找别的地方，找一个能更好地整合当前大型应用构建方式的编辑器。Webpack 和其他转译器确实是大型项目的领先选择，即使是小项目也有好处。
artf
嗨 Ian，如果你需要从 URL 加载 HTML 内容，我只能建议在服务器端获取并用该内容初始化编辑器（在浏览器中加载外部资源通常会遇到跨源问题），所以就浏览器的工作原理来说，我看不出添加这种功能的合理性。
GJSBlock
谢谢你举报，@ianef。 关于FEAT：从URL创建画布的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细致跟踪 构...
我会手动在渲染组件中添加一个新节点。 视觉效果还可以，但无法保存，因为我的风格不是用自动生成的GrapesJS ID。 要手动解决这个难题，我双击要进入的组件，然后在画布主体中点击外部。然后，将 GrapesJS ID 和 'data-gjs-type='text' 添加到新节点，从而可以保存。 Vue.js： “Main.vue”文件的一部分： “''js 文本编辑器 https://grapesjs.com/docs/api/richtexteditor.html https://css-tricks.com/creating-vue-js-component-instances-programmatically/ const...
bgrand-ch
优化后的“TextEditor.vue”文件： “''js // ... onFontValidate （） { const { rte } = this.getRteData（） const spanNode = document.createElement（'span'） 设 anchorNode = {} this.selection.childNodes.forEach（childNode => { console.log（{ childNode }） if （ch...
bgrand-ch
i️ 它不能直接用 HTML，只能用 JSON。 Component = JSON 节点（html元素 + GrapesJS 数据） “''js addStylesToText （styles， tagName = 'span'） { const inlineStyles = styles.map（style => style.join（'：'））.join(';') + ';' const selectedComponent = this.editor.getSelect...
GJSBlock
谢谢你举报，@bgrand-ch。 关于新节点添加后如何刷新/重新渲染？的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something...
你好@artf 我卡在一件事上，我想添加一个模块，也想用职业名称来增加风格 这是我的代码 -： 这正好给了我想要的效果 HTML部分是HTML代码，样式部分是样式部分，但我想为它添加一个新的特征，以及如何在这里定义类型 另一方面，当我定义类型并做类似的事情时 添加一个新特性后，它给了我 div 标签和内联样式，如截图所示。 你能帮我解答一下吗 谢谢 如果我在组件中定义内容，那我如何用类名定义样式 <img width=“413” alt=“截图 2021-01-06 上午11：04 24” src=“https://user-images.githubusercontent.com/20657737/103745089-e242b...
artf
“''js 内容：{ 内容：section_content，// <- 你应该用“components”，而不是“content”...... 输入：'section'， } '' 帮自己一个忙，别再把整个区块定义成块，采用组件导向的方法，这样你的块主要会是这样：'''js bm.add（'custom-section'， { label： 'Section'， media： '<svg...>'， 内容：{ 类型：“自定义区块”}， ... }); ```
GJSBlock
谢谢你举报，@Abhisheknanda1344463。 感谢你分享关于为块添加类型和带有类名的CSS的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节，维护者可以更快地...
你好，@artf，我有一个自定义组件，带有按钮特性。当按下按钮时，我会用“comp.addTrait（）”动态添加自定义特质。 当我加载已保存的模板时，我希望容器也能显示动态添加的特征。（我用组件加载模板，但动态添加的特征没有显示出来。）我可能哪里做错了？
artf
我通过在组件上加一个计数属性，然后在容器的初始化中添加特征计数时间来实现。 这才是正确的方法。 特征会被故意跳过 JSON，否则你会暂停存储中的组件定义（例如，当你用新特征升级组件时，用户仍会看到旧的特征）
theSC0RP
@artf，谢谢你的回复。这是一条非常宝贵的信息。
theSC0RP
我通过在组件上加一个计数属性，然后在容器的初始化中添加特征计数时间来实现。
你好@artf 我正在尝试制作一个组件光箱，和Grape Drop一样。 我无法更新图片的原始字符 你能帮我一下吗 这是我目前写的代码 灯箱块 组件- ：
artf
请检查[图像组件]（https://github.com/artf/grapesjs/blob/dev/src/dom_components/view/ComponentImageView.js）
GJSBlock
谢谢你举报，@Abhisheknanda1344463。 关于Lightbox组件的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'som...
亲爱的，你好： 我想用程序方式把一个组件移动到封装器的首尾，我记得像editor.getWrapper（）.add（editor.selectedComponent（）， {at： 0}）;，但这是从selectComponent添加一个新的克隆， 也许在位置设置触发器“排序器：拖动：结束”？ 你能帮我吗？ 抱歉我的英语不好 ：'）
artf
可能有必要添加一个新的“component.move（desComponent， opts）”方法来应对这种情况，但目前你可以用以下方式实现： “''js const selected = editor.getSelected（）; select.remove（{ temporary： true }）;临时选项可以避免移除与组件相关的样式 editor.getWrapper（）.append（selected， { at： 0 }）; ```
GJSBlock
谢谢你举报，@alemenciones。 关于如何移动组件的问题非常好。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something chang...
版本： 0.16.22 你能重现演示中的bug吗？ 是的 预期的行为是什么？ 当用户按下预览按钮时，图标工具栏不可点击。 详细描述那个漏洞 当用户点击预览（即使是在演示网站）时，如果你在点击预览前将鼠标悬停在选中的组件上，你会发现可以再次点击工具栏。 为了解决我项目中当前的问题，我必须在预览运行时隐藏工具栏的div（“gjs-toolbar”），退出预览时再显示一次。 目前的行为是什么？ 在预览模式下，将鼠标悬停在选中的组件上，仍然有可点击的元素。 你能附上截图、截屏或实时演示吗？** 是的。请查看附带的mp4 https://user-images.githubusercontent.com/66264061/103091217...
artf
修复已准备好下一次发布
GJSBlock
谢谢你举报，@TouficNouwayhedd。 在预览模式下，工具栏只是隐藏但仍可点击的问题，似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这...
我正在尝试创建自定义方块。但当我在内容中使用“组件”时，表单没有提交。 当我用“内容”代替“组件”时，我能获取所有表单数据。 但这样就不允许我拖拽新的输入到成型状态。
gixid192
关键是——HTML缺失了。 如果可以的话，建议你把代码分享到codesandbox或类似的在线编辑器里。
artf
是的，我们需要完整的代码来理解问题。 无论如何，如果你用的是“脚本”，请定义一个自定义组件，而不是直接放在块里，否则存储会有问题。我知道文档里是这样说明的，但块的使用只是示例（我希望能在下一个版本更新）
no-response[bot]
由于我们请求原作者提供更多信息未获回应，本期已自动关闭。仅凭当前期刊中的信息，我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案，请随时联系我们，以便我们进一步调查。