已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 336 个问题
🔍 style-manager嗨。当我尝试用带有一些 VML 包装标签的现有 HTML 代码生成新闻通讯模板时<style>，现有的样式类处理得很好，尽管编辑器中删除了相关 VML 的提及。 能否给我一些可能的变通方法？GrapesJS CSS 编辑器里真的有可能有 VML 代码吗？
ClaudeCode
谢谢你举报，@DMSlam。 关于有没有办法把VML代码保留在CSS里，以避免某些样式出现在Outlook？，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） =>...
大家好，与其用这种方式在首页造型...... 有可能在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...
我想自定义 Grapesjs 的界面，但 js 和 css 文件都被压缩了。请告诉我该怎么做？我只是想在界面里保留一些特定的模块，比如图片、文本等。
echobinod
SASS 用于生成压缩后的 CSS 文件。你可以从这里更改样式变量：src/styles/scss/
artf
@SyedHashimShah https://grapesjs.com/docs/getting-started.html
ClaudeCode
谢谢你举报，@SyedHashimShah。 关于我如何自定义Grapesjs的用户界面？ 这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.l...
你好， 我怎样才能在属性列表中添加buildProps，使得当选择某个选项时，该选项的属性会显示出来 这是我在flex属性上想要实现的目标示例。 “JavaScript { 名称：“布局”， 开启：真， buildProps： ['display']， 性质：[ { 类型：“无线电”， 属性：“显示”， 列表：[ { 标题：“区块”， 名称：'<span class=“material-icons”>calendarviewday</span>'， 值：“方块”， }, { 标题：“Flex”， 名称：'<span 类=“material-icons”>calendarviewweek</span>'， 值：“flex”， bui...
Ju99ernaut
我相信你可以把构建道具从属性列表中移出，仍然能实现你想要的功能，内置的Flex Box相关属性只有在组件带有“display： flex”时才会显示。还需要注意的是，“buildProps”只是输入的预设，不能嵌入到其他输入中，也就是属性列表 “''js { 名称：“布局”， 开启：真， buildProps： ['display'， 'direct'， 'align-content'， 'align-items'， 'align-items'， 'align-self'，...
server102
谢谢。我试过了，但网格属性不起作用。可能得手动实现，但不确定怎么最好地处理这个问题。
Ju99ernaut
网格属性没有“buildProps”，所以你得从头开始构建，遗憾的是文档里关于自定义属性的信息不多，你可能得从API参考里拼凑起来 https://grapesjs.com/docs/api/style_manager.html#stylemanager
我有一份类别清单，想根据是否需要用不同风格标记一些类别。 理想情况下，我可以在 div 里添加一个类，类为 'GJS-title'，这样它就会显示为'gjs-title required-field' 'this.editor.BlockManager.getCategories（）;' 返回了我所有块类别的数组，但我的问题是，我该如何选择一个来使用 .addClass（） ？ 如果我按“id”来判断，并且我把 ' this.editor.BlockManager.get（'logos'）.addClass（'required-field'）' 这似乎不起作用。 选择 gis 块类别的 DIV 以实现 .addClass（） 的最...
artf
你好@eikerd通过查看代码，目前我看不到其他方法可以自定义块类DOM，除非你自己用DOM做点什么（块渲染完成后）。 我可能会在下一个版本中把视图添加到分类模型中，所以你可以这样做： “''js const blockCat = 编辑器。Blocks.getCategories（）.filter（c => c.get（'id'） == 'ID-CAT'）[0].view; blockCat.el.addClass（'add-class'）; ```
ClaudeCode
谢谢你举报，@eikerd。 关于Blockmanager：添加自定义类gjs-block-category / gjs-title DIVs，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on...
非常感谢你提供这个图书馆。 背景：我正在构建一个编辑器，打算从我之前开发并在应用中使用的现有Vuejs组件中定义大部分组件。这些大多是基于界面的简单和复杂组件。例如，我有简单的 vuejs 组件，分别叫 su-form、su-field、su-label、su-input、su-radios、su-buttons、su-validations，以及使用简单组件如 su-login-form、su-registration-form 等的复杂 vuejs 组件。正如你可能猜到的，su-form、su-field 以及其他类似组件都有插槽，我会添加其他组件，以创建一个具有业务用例的实用组件。例如，我会在 su-form 的插槽中插入...
Ju99ernaut
我不确定每个组件是否都有这样的钩子，但你可以尝试利用组件的“toHtml”属性。这个问题已经在别处讨论过了，所以你可以在期刊中搜索，因为有不少。
artf
是的，你可以用自定义的“toHTML”/“toJSON”函数（模型中）来定义组件，以便自定义它们的输出
ClaudeCode
感谢你报告，@sudiptochoudhury。 存档前每个组件是否存在一个事件，组件可以监听？的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）—...
版本： 0.16.41 你能重现演示中的bug吗？ [X] 是的 [ ] 不 预期的行为是什么？ 1）将选中的父组件（容器）复制到剪贴板。 2）从剪贴板中选定的父组件（容器）粘贴到同一页面或其他页面。 3）所有组件都保留ID样式和内联样式。 目前的行为是什么？ 1）将选中的父组件（容器）复制到剪贴板。 2）从剪贴板中选定的父组件（容器）粘贴到同一页面或其他页面。 3）组件失去了ID样式，但内联样式未丢失。 组件没有重新生成的样式ID，而是使用相同的之前ID，但带有“-2”。 你能附上截图、截屏或实时演示吗？ [X] 是的（附上） [ ] 不 https://jsfiddle.net/bgrandch/71yuz26p/33/ 根据...
artf
那是因为你用你的版本更新了原始命令（错误地）。确实，如果我把你的插件从演示中移除，一切都会正常运行。请检查原始的复制粘贴命令，你应该在粘贴前克隆组件，所以你的实现可能无法正常工作。
artf
只要检查原始命令 https://github.com/artf/grapesjs/blob/dev/src/commands/view/CopyComponent.js https://github.com/artf/grapesjs/blob/dev/src/commands/view/PasteComponent.js
bgrand-ch
@artf 谢谢你的回答。请提供链接、示例或更多解释？😅
有没有办法为内置的 Codemirror 编辑器添加快捷键和插件？我特别想要一个评论快捷键。 有各种插件使用Grapesjs编辑器，包括 https://github.com/artf/grapesjs/issues/324#issuecomment-330571539 和自定义HTML代码插件，https://github.com/Ju99ernaut/grapesjs-script-editor 和 https://github.com/ryandeba/grapesjs-html-block，都能从中受益。 虽然有办法通过常规的 Codemirror 自定义选项，但调用插件似乎不起作用，比如说 “JavaScript var...
abulka
我终于让Grapesjs捆绑的'commentRange'工作了——必须直接调用'cm.commentRange'，而不是通过'cm.execCommand'。此外，它还需要参数。因此，只要你选择你想评论的区域，我就能让一些评论功能正常工作： “JavaScript 'Cmd-1'： 函数 （cm） { cm.commentRange（true， cm.getCursor（true）， cm.getCursor（false）） }， // comment 'Cmd-2'：...
artf
是的，我觉得在CodeMirrorEditor.js中曝光没问题
ClaudeCode
谢谢你举报，@abulka。 安全和依赖性问题很重要。GrapesJS 团队积极致力于保持依赖系统的更新。 为你现在： 运行“npm审计修复”以查看可用的补丁 查看是否有更新的GrapesJS版本，可能已经解决了这个问题 如有稳定版，升级前先测试最新稳定版 如果漏洞非常严重，可以使用“npm audit fix --force”，但请务必彻底测试 理解风险： 在GitHub安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定条件下触发 保持...
你想给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：*”事件进行细致跟踪 构建一...
我正在构建一个自定义的“textarea”组件，希望它能像内置的“text”组件一样，这样编辑grapesjs画布上的textnode时，会更新'.components'中的'textnode'。我希望组件能正确导出为 HTML，比如“<textarea>我的用户编辑了 TEXTNODE CONTENT”</textarea>。 目前，'fancyTextarea'导出的html在textnode上总是保持不变，尽管我在画布上编辑了它。有没有什么textnode变更事件我应该捕获并执行——我找不到？ 这是我的组件 “JavaScript const fancyTextarea = editor => { 编辑。DomCompone...
artf
你好@abulka，既然编辑是在视图中进行的，你应该在视图更新后更新组件模型。所以应该能用类似这样的东西 “''js 型号：{ ... }, 浏览量：{ 事件：{ 输入：'handleInputUpdate'， }, handleInputUpdate（ev） { this.model.components（ev.target.value）; } }, ```
ClaudeCode
谢谢你举报，@abulka。 如何让textnode编辑更新组件内容？的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本...