GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#31422020年11月14日作者 mohd74693 个回答
0 个反应

AssetManager 渲染问题

@artf这正是之前已经被解决过的[问题#2760](https://github.com/artf/grapesjs/issues/2760),这是错了还是我做错了?我本以为资源不会显示出来,但它们全都可见 ![图片](https://user-images.githubusercontent.com/12613564/99156432-99d0e280-26e2-11eb-8289-d76d66af2ad1.png) 这是我的代码,我使用的是“Grapesjs”的版本:“^0.16.27”, ![图片](https://user-images.githubusercontent.com/12613564/99156485-04...

artf

@awais786327请提供该问题的现场演示

no-response[bot]

由于我们请求原作者提供更多信息未获回应,本期已自动关闭。仅凭当前期刊中的信息,我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案,请随时联系我们,以便我们进一步调查。

ClaudeCode

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

#31402020年11月13日作者 ZeroCoolHacker2 个回答
0 个反应

画布中的交互组件

我正在用 Grapesjs 开发一个测验生成器插件。我在想我们是否可以添加一个组件,它是交互式的,点击后会添加新的组件。 例如: ![图片](https://user-images.githubusercontent.com/18724529/99068996-56d21a80-25cf-11eb-8aa7-29ca26ac4e6c.png) 大概是这样的。当丢弃时,没有输入,但点击“添加新字段”时,输入会出现。 可能吗?怎么做?

artf

你必须[扩展自定义组件的视图](https://grapesjs.com/docs/modules/Components.html#view)

ClaudeCode

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

#31382020年11月13日作者 adamwpe2 个回答
0 个反应

避免<TABLE>在保存过程中被修改。

大家好, 我遇到了一个问题,当保存自定义HTML组件(只是一个表格)时,Grapes JS会修改它。 保存之前 ![图片](https://user-images.githubusercontent.com/49768920/99049128-62512180-258e-11eb-9213-10bc30c037b0.png) 存档之后。 ![图片](https://user-images.githubusercontent.com/49768920/99049054-464d8000-258e-11eb-9545-726b0348fa4c.png) 有没有可能把什么东西包裹起来,避免被修改?问题的原因是我用 twig(一种模板语言...

adamwpe

替换为#3139

ClaudeCode

谢谢你举报,@adamwpe。 关于保存<TABLE>时防止被修改的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件...

#31372020年11月12日作者 Asha15973 个回答
0 个反应

当我选择某个特定元素时,我没有看到它的样式。这个问题只发生在某些元素上。

未获得所选元素的样式 这是我的代码, const model = 编辑器。StyleManager.getModelToStyle(component); let styleObject = model.getStyle(); console.log(“样式”,styleObject) 版本: 0.14.49 你能重现演示中的bug吗? [X] 是的 [ ] 不 预期的行为是什么? 当选中元素时,我应该会看到该元素的样式。 目前的行为是什么? 当选中元素时,我没有得到任何样式,只有空的对象。 你能附上截图、截屏或实时演示吗? [X] 是的(附上) [ ] 不 这是实际和预期结果的截图,真实 ![截图,2020-11-12 16-5...

artf

首先,你需要升级你的 Grapesjs 版本(你用的是两年前的版本),然后你还得提供一个问题的实时演示。

no-response[bot]

由于我们请求原作者提供更多信息未获回应,本期已自动关闭。仅凭当前期刊中的信息,我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案,请随时联系我们,以便我们进一步调查。

ClaudeCode

谢谢你举报,@Asha1597。 当我选择某个特定元素时,我无法获得它的样式。这个问题只发生在某些元素上。 似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandb...

#31362020年11月11日作者 vijaycreatise4 个回答
2 个反应

再创建一个 JSON 键

{“type”: “text”,“状态”:“悬停”,“内容”:“请在此插入您的文本”,“属性”:{“id”: “ixx2” },“activeOnRender”: 0,“open”:假 } 在 JSON 里我想添加带有对象的新键。示例 data 键,这里会有自定义特性。我想添加一个新的对象,可以从中获取数据并填充输出。我能做到吗?下面是我想要的样件。有人能帮我解答一下,怎么才能实现这个目标吗? { “type”: “text”, “状态”:“悬停”, “内容”:“插入你的文本在这里”, “属性”:{ “id”:“ixx2” }, “数据”:{ “url”:“https://something.com”, “refresh_rate...

longdoan7421

抱歉我误解了你的问题,所以我之前的评论不相关。 为了实现你的愿望,你需要创建自己的性状类型[(docs)](https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type)和组件类型[(docs)](https://grapesjs.com/docs/modules/Components.html#define-custom-component-type)。 有更简单的方法,但它不能把所有自定义数据保存...

longdoan7421

我不太明白你的问题。 但如果你为组件模型设置了任何自定义属性(除了一些保留键,比如“组件”、“样式”等), 例如: 'component.set('customTraits', yourCustomTraits);'。它会以JSON数据形式存在。

vijaycreatise

我试过这样做,但没用。 我想在 JSON 中添加 data 键和对象,用户选择表单时可以输入 API URL。你能帮我检查一下我做得对吗?

#31322020年11月11日作者 tranthanhhoa1 个回答
0 个反应

的性状不起作用

版本: 0.16.27 摘要: [type =“number”]的性状不起作用 繁殖步骤: 试着输入类似“abc”这样的词,代表一个类型是“number”的特征。 意料之中: 不要接受这根绳子 真实: 仍然接受这条绳子

ClaudeCode

谢谢你举报,@tranthanhhoa。 感谢你分享关于带[type =“number”]的特质不起作用的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快...

#31312020年11月11日作者 Joshmamroud4 个回答
0 个反应

将纯文本粘贴到文本组件中,会为粘贴的文本添加 <font /> 封装器

版本: 0.16.27 你能重现演示中的bug吗? [] 是的 [X] 不 预期的行为是什么? 将粘贴文本为纯文本(文本节点),不像Grapes JS在</>元素中进行打包。 目前的行为是什么? 当我把纯文本粘贴到空文本元素时,编辑器会用<font />元素包裹它。 在粘贴文本之前 ![Screenshot1](https://user-images.githubusercontent.com/5224187/98757808-4d606c80-239b-11eb-8194-3b854dd8ac97.png) 在文本粘贴(以纯文本形式)之后 ![Screenshot2](https://user-images.githubuser...

Joshmamroud

@artf你知道这是在组件、RTE还是其他地方发生的吗?你能指点我正确的方向吗?如果有人能帮忙,我将非常感激。谢谢!

artf

我没法复现,但我看到你用的是自定义的“dm-text”组件,这可能是原因?!

Joshmamroud

@artf 我不这么认为。以下是 dm-text 组件类型的配置 “JavaScript” { 扩展:“文本”, 型号:{ 默认值:{ 名称:“文本”, 特征:[], 可编辑:正确, 可掉落:错误, textable:确实如此, 风格:{ 填充:“10像素”, 宽度:“100%”, 高度:“自动” }, 可造型:[ “背景色”, “页分内”, “颜色”, “文本对齐” “font-size”, “字体家族”, “字体粗细”, “线高”, “边框宽度”, “边框颜色”, “边...

#31292020年11月10日作者 lebonsavane2 个回答
0 个反应

错误:需要Babel “^7.0.0-0”,但加载时为“6.26.3”

我尝试安装新版本,但在package.json里什么都没动。它用一个叫“blocks avancées”的插件,但每次运行代码时,每个文件夹都会有这个问题 " 错误....../src/dom_components/view/ComponentFusionView.js 模块构建失败:错误:需要 Babel “^7.0.0-0”,但加载时已加载“6.26.3”。如果你确定自己有兼容的@babel/核心版本,很可能是构建过程中加载了错误版本 "

artf

ComponentFusionView?那肯定不是来自主葡萄核心,我们没有那个成分......很可能你用的是某种修改过的版本,这可能是导致错误的原因

ClaudeCode

谢谢你举报,@lebonsavane。 错误 Error:需要 Babel “^7.0.0-0”,但加载时为“6.26.3”。如果你确定自己有兼容的@babel/核心版本,很可能是构建过程中加载了错误版本 发生在组件在组件生命周期完全初始化前尝试访问属性时。这是GrapesJS中常见的竞争条件。 立即解决办法: 如果你控制代码,可以用空检查包裹调用: “JavaScript if (component && typeof component.method === 'func...

#31282020年11月10日作者 sprklinginfo2 个回答
0 个反应

专长:在鼠标点击的位置放置一个组件

你想给GrapesJS添加什么? 当组件被丢弃时,保持鼠标点击的位置。 详细描述你的功能需求详细 我开始玩一些基础的积木/组件。如果我拖拽一个组件,比如简单的文本输入,看起来它们会通过一个隐形网格布局吸附到最后一个激活的组件上。有没有可能某个组件只是停留在鼠标点击的位置?即使我试图把组件拖到别处,它也不会移动到我想要的位置。

sprklinginfo

发现已经通过使用“dragMode: 'absolute'实现了。谢谢。

ClaudeCode

谢谢你举报,@sprklinginfo。 关于FEAT:在鼠标点击的位置放置一个组件,这是个很棒的建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“ch...

#31252020年11月9日作者 fq-selbach3 个回答
0 个反应

线性渐变CSS对背景图像有奇怪的处理

版本:0.16.27 你能重现演示中的bug吗? [x] 是的 [ ] 不 预期的行为是什么? 通过样式管理器添加“background-image”时,显示为“background-image: url(...);`. 目前的行为是什么? 你会看到的不是“background-image:url(https://grapesjs.com/docs/logo.png);”,而是“background-image:linear-gradient(https://grapesjs.com/docs/logo.png);”。 详细描述那个漏洞 当一个元素具有给定的类别为“背景:线性梯度(...)'或'背景图像:线性渐变(...);你试图...

johnkeel-thork

我正准备报告同样的问题。 新增背景图片: <img width=“847” alt=“截图 2021-12-23 12 06 51” src=“https://user-images.githubusercontent.com/26764290/147238562-8df3ea2a-aca7-4b08-9d64-73fd1495d699.png”> 它正在转换为线条渐变,而不是网址: <img width=“621” alt=“截图 2021-12-23 12 07 36”...

artf

关闭 [jsfiddle](https://jsfiddle.net/cqr7Luaj/),问题似乎解决了

ClaudeCode

谢谢你举报,@fq-selbach。 *线性梯度CSS对背景图像产生奇怪影响的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤:** 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更...

浏览所有主题