GrapesJS 问题

已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

状态

排序

找到 545 个问题

🔍 typescript

#35292021年6月10日作者 tmrowe1231 个回答

0 个反应

组件 style-manager accessibility typescript

Trying to add onClick attribute to component

你好，我对这个很棒的项目还比较新，但我正在尝试在从dropMenu选中组件ID后，更改另一个组件onClick的显示。我在选择 dropMenu 特性后，试图为组件添加 onClick 属性遇到了困难。我似乎无法从 addAttributes（）中访问 dropMenu 特性的值。我也无法使用外部的 addAttributes（）变量，比如 'var comp = document.getElementById（this.get（“traits”）.where（{name： “dropMenu”}）[0].get（“value”）'，包括 editor.getSelected（）。提前感谢大家 '编辑。Components...

GJSBlock

谢谢你举报，@tmrowe123。感谢你分享关于尝试在组件中添加onClick属性的报告。为了帮助团队调查并优先排序：请提供：一个最小可复现的例子（CodeSandbox/JSFiddle）你的GrapesJS版本号浏览器和操作系统信息浏览器控制台的任何错误信息重现问题的步骤最有帮助的是什么：简约代码示例（不是你整个项目）屏幕录制或截图显示问题明确区分预期行为与实际行为你正在使用的GrapesJS配置有了这些细节，维护者可以更快地识别和优先排序修复...

查看详情

#35282021年6月10日作者 krishnaeverestengineering2 个回答

0 个反应

组件 typescript 常规

I wasn't able to unit test grapesjs components

不太清楚具体情况，但这就是我得到的。有时测试通过，有时随机失败。请帮帮@artf <img width=“1474” alt=“截图 2021-06-10 晚上7：08 14”，src=“https://user-images.githubusercontent.com/55732888/121535085-71faf080-ca1f-11eb-8e07-aeedf9ab7464.png”>

artf

和这里一样 https://github.com/artf/grapesjs/issues/3476#issuecomment-848074298

GJSBlock

谢谢你举报，@krishnaeverestengineering。感谢你分享关于我没能对Grapesjs组件进行单元测试的报告。为了帮助团队调查并优先排序：请提供：一个最小可复现的例子（CodeSandbox/JSFiddle）你的GrapesJS版本号浏览器和操作系统信息浏览器控制台的任何错误信息重现问题的步骤最有帮助的是什么：简约代码示例（不是你整个项目）屏幕录制或截图显示问题明确区分预期行为与实际行为你正在使用的GrapesJS配置有了这些细...

查看详情

#35272021年6月10日作者 alpha2k-io4 个回答

0 个反应

提问 style-manager typescript

Post the full complete demo code

能不能从开始时发布完整的演示代码？有许多相互依赖的小片段。如果能把这些分开放在仓库里，开发者可以看到预期的最终结果，那会很好。很多情况下，有些简单的事情被跳过了，或者片段的位置不对......比如CSS顺序。这是一个强大的编辑器，但需要非常陡峭的学习曲线来定制以满足需求。谢谢， AJ

anlumo

是的，问题在于演示版自己定义了插件，然后导入所有其他插件。这让学习操作变得非常困难，因为你必须在不同仓库之间执行大量重定向。这也不是基于 grapesjs编写应用的方式。大师演示插件的链接也不像演示页面那么容易找到，是[这里]（https://github.com/artf/grapesjs-preset-webpage）。

artf

入门教程的最终代码实际上是[这里]（https://github.com/artf/grapesjs/blob/dev/docs/.vuepress/components/DemoTheme.vue）（及其 grapesjs [config]（https://github.com/artf/grapesjs/blob/8b423fdf093865a6bf55dc8285030ce99c111d6d/docs/.vuepress/components/demos/utils....

erpardeepjain

@artf，但当主文件在Vue，基础项目在React时，如何运行那个文件或配置文件？你能指点一下如何让它像演示中展示的那样运行吗？

查看详情

#35252021年6月9日作者 anlumo3 个回答

0 个反应

style-manager 增强提问 typescript

In Style Manager, Allow Requiring the Default Setting

你想给GrapesJS添加什么？ CSS 属性 'float' 只适用于 'position： static;' 元素，而这恰好是默认设置。我只想在位置没有设置其他时显示浮球无线电选择器。但是，如果我在属性定义中添加“require： ['static'];'，该设置只在我明确将位置设置为”静态“时显示，而当我保持默认状态（默认状态也是”静态“）时，设置不会显示。最新版本有替代方案吗？[ ] 是的（描述替代方案）[X] 不这是否与某个问题有关？[ ] 是的（请提供本期链接）[X] 不

artf

你好@anlumo，你有没有尝试用类似“要求：{ position： ['static'] }''来扩展浮点定义？

anlumo

![图片]（https://user-images.githubusercontent.com/644763/124964896-d494db80-e021-11eb-9b11-8741d07476bf.png）是的。重新加载页面后似乎没问题，但切换位置后就停止工作，看起来就像截图里那样。定义如下： “''js { 名称：“布局”，开场：假， buildProps： ['position'， 'top'， 'bottom'， 'left'， 'right'， 'flo...

GJSBlock

谢谢你举报，@anlumo。关于FEAT：在样式管理器中允许要求默认设置的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*”事件...

查看详情

#35242021年6月8日作者 iteniel3 个回答

0 个反应

文档提问组件 typescript

Integrate select2 UI element into traits

我刚接触 grapesJS ......很棒的工具。我有几个关于特质的问题。我按照这个教程操作了 https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type 因为我必须覆盖href的生成方式。这个示例对我来说很棒，只需少量修改。我想替换...... <select multiple=“multiple”> <option value=“option”></option> ....... </选择> ![Selection_208]（https://user-images.githubusercontent.com/25899228/121146044-d...

artf

你可以这样做： “''js tagListElement.on（'select2：select'， e => this.onChange（e））;onChange 会正确触发 onEvent ```

iteniel

@artf谢谢你能帮我回答问题的第一部分吗我需要类似 onPostRender/afterRender 的工具，在 DOM 存在时初始化 select2 组件 createInput 方法之后的某个词

GJSBlock

谢谢你举报，@iteniel。关于[问题]：将select2 UI元素集成到特质中的好问题。推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something chang...

查看详情

#35152021年6月4日作者 anlumo4 个回答

9 个反应

画布 style-manager typescript

Gjs-selected Style is Hardcoded

定义如下： https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/canvas/view/FrameView.js#L303-L306 总是附加在框架上。它包含选定元素的颜色定义（那个蓝色轮廓）。这个颜色不能更改，因为这里有个“！重要”。由于这附加在正文中，在标题中添加样式表也不会覆盖它，即使我在那里也用了“！important”。在我的使用场景中，关键问题是我想打印用 Grapesjs 创建的文档，但打印出来的模板不应该包含选取大纲。我可以写“@media print { .gjs-selected { outlin...

artf

你好@anlumo你说得对，不幸的是，组件状态样式是在 iframe 内渲染的。我尝试通过引入[这个选项]（https://github.com/artf/grapesjs/blob/614fad12b729c382b2444ca8b5e584f1dafc063a/src/canvas/config/config.js#L38-L39）把它们放到户外，但这还不能支持多重选择。所以，目前唯一能正确处理它们的方法就是使用以下选项： “''js Grapesjs.init（{ /...

filipecheverrya

嗨，@mingxin-yang，我相信你必须遵循@artf说的同样规则。但使用相应的类 “''js Grapesjs.init（{ // ... canvasCss： ' .gjs-tools .gjs-badge { / 用于标签 / 背景色：红色; } .gjs-toolbar { / 用于工具栏 / 背景色：红色; } , }) ``

GoodPHP

发布了用于固定颜色的免费插件边界： https://gjs.market/products/borders-color-around-selected-component

查看详情

#35122021年6月2日作者 Palash-Mandal3 个回答

1 个反应

组件 style-manager 提问 typescript

子元素不可拖拽，可丢弃，可高亮显示。还有所有未推送在样式部分的子元素的CSS，同时在插件中开发横幅组件

你好，@artf，我正在尝试开发一个简单的横幅插件，包含标题、副标题和链接。每个元素都可以拖拽、可丢弃、高亮，但基于以下代码，某些部分代码无法正常工作。请帮帮我 ![图片]（https://user-images.githubusercontent.com/17553816/120482925-3cc32280-c3cf-11eb-8f55-d8ccb3124b3d.png）只有横幅类 CSS 推送，但还有一个 CSS 部分全部不发布 ![图片]（https://user-images.githubusercontent.com/17553816/120482976-4c426b80-c3cf-11eb-816a-689cf7...

artf

在你的模型组件定义中，你用的是“content： config.template”，但应该是“components： config.template”

Palash-Mandal

你好，@artf，我已经解决了，但组件出了问题。子组件 H2、H3 和 Link 负责推送所有其他组件。如果我丢掉一个列组件，那个子元素也会被推入去。我该如何限制冲突。下面是我做的Codepen示例。 https://codepen.io/coderdesigners/full/XWMoNbZ 如果我掉一栏，下面会上升。这并不常见。默认情况下应该会有。 ![图片]（https://user-images.githubusercontent.com/17553816/12...

GJSBlock

谢谢你举报，@Palash-曼达尔。关于子元素不可拖拽、可丢弃可高亮的问题，非常好。还有所有未推送在样式部分的子元素的CSS，同时在插件中开发横幅组件。ProseMirror 推荐的方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'ch...

查看详情

#35112021年6月2日作者 moises-flowize2 个回答

0 个反应

提问缺陷组件文档 typescript

Command core:component-enter not working in all the cases

警告请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本： 0.16.44 你可以在控制台输入“grapesjs.version”获得版本你能重现演示中的bug吗？[ ] 是的[X] 不预期的行为是什么？使...

artf

感谢@moises-flowize，这个问题将在下一个版本中修复 https://github.com/artf/grapesjs/commit/ac96298add119c4f4e000967ab3332f9ad711613

GJSBlock

谢谢你报告，@moises-flowize。 Command core：component-enter 在所有情况下都无法正常工作的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重...

查看详情

#35102021年6月2日作者 iabhiyaan2 个回答

0 个反应

提问 typescript 常规

Re render traits after certain events (e.g click)

点击按钮后如何重新渲染属性？注意：重新渲染不应该是主导修改。我创建了一个函数，通过调用 'createInput（）' 中的 'render（）' 来渲染 trait 有没有办法用更新后的dom字符串重新渲染这些特征，这个字符串最初是在'createInput（）'上创建的？

artf

createInput只调用一次，如果你想更新属性的UI，可以依赖每次选择更改时调用的“onUpdate”。附言：请避免使用“问题”提问，请查看讨论标签

GJSBlock

谢谢你举报，@iabhiyaan。关于关于某些事件后（比如点击）后渲染特质的好问题。GrapesJS 推荐的方法是使用事件驱动 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something ch...

查看详情

#35082021年6月1日作者 tranthanhhoa2 个回答

0 个反应

组件提问 typescript

Layer visibility does not work properly

版本： 0.17.4 如何繁殖切换到平板或移动模式通过切换图层的可见性图标来隐藏所选组件切换到桌面模式。结果在隐藏组件显示时，可见性图标仍然被禁用。预料中切换到桌面后，可视图标被启用。

artf

感谢你的反馈@tranthanhhoa我会在下一个版本里修复，但我觉得我会把可见性的变化当作全局条件，这样隐藏组件不会在所有设备上都可见。

GJSBlock

谢谢你举报，@tranthanhhoa。关于图层可视化功能不正常，这是个很好的问题。推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'）...

查看详情

GrapesJS 问题

浏览所有主题