GrapesJS 问题

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

状态

排序

找到 466 个问题

🔍 components

#36522021年7月28日作者 NoumanAhmad-Braqsol4 个回答

0 个反应

提问组件 typescript

如果我把文本改成链接， Grapes 就不识别链接。

你好@artf ![捕获]（https://user-images.githubusercontent.com/72378934/127296691-17ee71ac-4525-426a-933d-fecd81fdf86f.PNG）我刚接触 Grapes JavaScript，写了一个函数将 selet 文本转换成链接。它运行良好。当我选择组件类型时，它显示它是一个文本。刷新页面后，它识别出一个链接。但我不想刷新它。怎么做？你可以看到上面“优势”现在是一个链接，但在控制台上显示是文本

artf

你说的是CKEditor还是默认的RTE？

NoumanAhmad-Braqsol

我用的是CKEditor。

artf

那这不是正确的仓库

查看详情

#36452021年7月26日作者 codingmachine162 个回答

0 个反应

提问文档组件缺陷 typescript

请阅读并遵循接下来的三步，然后在发布问题前删除它们遵循贡献指南 https://github.com/artf/grapesjs/blob/master/CO…

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

codingmachine16

你好@artf 你好，我们正在用 grapesJs构建一个内容管理系统。我们创建了标题、页脚、产品滑块和各种横幅的组件。我们几乎完成了一个电子商务网站，使用 grapesjS + React Js + NodeJs 和 Mongdb。我们能够存储和加载组件，进出数据库。比如我们的网站管理员部分就是 abc.com/editor 这里我们正在创建布局，并存储和加载页面我们在前端遇到了问题。比如，abc.com/home 这里我们想显示存储的组件，并绑定动态数据。我们不想...

GJSBlock

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

查看详情

#36442021年7月26日作者 NoumanAhmad-Braqsol2 个回答

0 个反应

提问组件 style-manager

Link showing as span when getHtml() called

嗨，@artf 我用 CKEDITOR 添加链接到选定文本中，运行正常。我用这个代码来添加链接 ![ASDASD]（https://user-images.githubusercontent.com/72378934/127009758-7803aa7f-832d-4f2d-ab3f-a84d4bba252a.PNG）它显示为上述另外，如果我检查SRC，DOM里显示有个链接，显示为blow ![SDSD]（https://user-images.githubusercontent.com/72378934/127009932-7f3c5a44-d17d-4160-ac94-6445668760f0.PNG）但当我getHtm...

artf

@NoumanAhmad-Braqsol，请在打开BUG问题时遵循议题模板（这确实不是核心漏洞，但可能与你的ckeditor配置有关），否则请开启新的讨论区

GJSBlock

感谢你报告，@NoumanAhmad-Braqsol。关于 link（当 getHtml（）调用时显示为 span 的问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（...

查看详情

#36402021年7月23日作者 jlpatrick2 个回答

0 个反应

style-manager 组件缺陷提问 typescript

样式管理器的背景UI在Body/Wrapper上无法正常工作

在我看来，样式管理器的背景控件在处理主体与其他组件时存在一个UI错误。这个问题在#2834的截图中@kuhelbeher可以看到，但我也会提供一些简单的复现步骤。也许这个问题和那个问题有关。前往 https://grapesjs.com/demo.html删除所有现有组件，直到只剩下Body/包装器选择“身体”并设置背景图像（注意这里背景UI的身体图像设置长什么样）打开方块，拖动导航栏到页面顶部在导航栏上设置背景图像，编辑器中应该能渲染此时再次选择主体/封装器，然后查看背景UI（看起来它知道已经设置了非默认设置，因为标签颜色变了，重置图标可见，但第1层没有显示）在编辑器中选择导航栏，并比较它在背景UI中显示的内容（第1层正确显示）...

artf

谢谢你，Jim，是的，问题确实一样，所以我把这个作为#2834的重复关闭修复后我会在那里更新。

GJSBlock

谢谢你举报，@jlpatrick。样式管理器后台UI在Body/Wrapper上无法正常工作的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例（CodeSandbox）——...

查看详情

#36392021年7月23日作者 anatoli-dp4 个回答

0 个反应

undo-manager 组件增强提问 typescript

Improve UndoManager API

我认为一个更详细的历史堆栈会带来很棒的功能。你可以拿到撤销堆栈，然后从中建立一个记录所有编辑的历史报告，但对我来说每次编辑具体是什么不太清楚（至少对我来说是这样，如果我遗漏了什么，请告诉我）。比如用公式化描述，比如组件[组件名称]在[页面位置或组件添加]处添加/删除/编辑，或者组件[组件]文本编辑......（请原谅我用这个笼统描述，因为连我自己都不知道该怎么表达）只是简单介绍一下每个堆栈中项目的撤销/重做历史。我目前只知道每个历史物品的ID，如果现在可行的话，我只是不知道该如何提取这些信息来创建一个历史侧边栏，除了ID，请给我一些线索，告诉我该注意什么最新版本有替代方案吗？[ ] 是的（描述替代方案）[ x] 不这是否与某个...

artf

嗨@anatoli-dp，如果能查看撤销历史会非常酷，我已经在考虑如何扩展UndoManager模块，通过插件实现这种功能（比如你可以用你喜欢的框架渲染UI）。 UndoManager 栈会在任何被监听的模型/集合（组件、CSS 规则等）发生变化时更新，新增一个包含动作信息的 UndoAction 对象。值得注意的是，一次更改可以生成多个撤销动作： “''js 这会为新组件生成一个撤销操作以及另一个用于新CSS规则的任务 editor.addComponents（' <d...

anatoli-dp

是的，我知道如何访问这个栈，只是不知道怎么设计它，才能给最终用户更有意义的描述

artf

我只是不知道怎么给最终用户一个更有意义的描述每个UndoAction（堆栈的每个实例）都会告诉你动作的“类型”（例如“添加”、“删除”、“重置”、“更改”）以及关于更新模型的详细信息（例如，Component、CssRule 等）。你可以尝试读取这些数据，但我更想的是如何让每个操作都易于识别。

查看详情

#36382021年7月23日作者 momu-20162 个回答

0 个反应

组件文档 typescript

Script-props is invalid

你好！@artf，感谢你的精彩工作！我选择值时会跟着 https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts,but 操作，脚本没有执行，期待大家的建议，非常感谢！ “''javascript export default function（editor， opt = {}） { cont c = opt; const domc = 编辑。主导组件; const defaultType = domc.getType（“default”）; const defaultView = defaultType.view; con...

artf

这里似乎一切正常：https://jsfiddle.net/rp7wa58h/ 无论如何，如果你不用“视图”，其实也不需要它，“isComponent”（在你的示例中拼写错误且位置错误）也是一样，“data-gjs-type”默认已被编辑器自动使用。

GJSBlock

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

查看详情

#36342021年7月22日作者 pankajsharma894 个回答

1 个反应

提问组件 typescript

How we can hide RTE for editable components ?

HI We have a requirement, where we don't want to show rte on editable components. how we can achieve that ?

mcottret

我允许自己补充一些我认为更接近楼主想达到的目标，基于@artf的回答： “打字稿” 编辑。DomComponents.addType（'text'， { extendFnView： ['onActive']，型号：{ 默认值：{ disableRte：错误 } }, 浏览量：{ onActive（） { if （this.model.get（'disableRte'）） { this.rte.getToolbarEl（）.style.display = 'none'; }...

iabhiyaan

“''js editor.on（'component：selected'， cmp => { CMP.set（{ 可编辑：错误，传播：[“可编辑”] }) }) ```

pankajsharma89

我们不想让组件不可编辑，组件必须是可编辑的，只是不想在组件上显示左侧工具栏。

查看详情

#36312021年7月21日作者 anuragk154 个回答

1 个反应

提问组件文档 style-manager typescript

How to load dynamic content in the final HTML file?

我到处找过，包括问题部分，也尝试了几种方法。但真的不太确定如何在组件里总是加载动态内容（不仅仅是导出或通过编辑器保存时）。我想在 grapejs 组件中加入一个脚本，它总是从网页抓取内容并更新组件。比如，当我写博客并存储在数据库里时。现在每当有人访问我的着陆页（用 Grapesjs做的）时，我希望他们能看到我最新的博客。我不想通过编辑器手动重建 grapejs 页面。另外，如果有终端用户访问网站，我只需要发送 Grapejs html和css，对吧？没有组件？抱歉如果这是个新手问题或者有人之前已经回答过。

stf1981

我觉得你应该搜索组件相关的JavaScript -> https://grapesjs.com/docs/modules/Components-js.html#component-related。这段 js 代码嵌入在 html 输出中。

anuragk15

我记得你会搜索与组件相关的JavaScript -> https://grapesjs.com/docs/modules/Components-js.html#component-related。这段 js 代码嵌入在 html 输出中。所以每次组件加载时，它都会通过 JS 脚本动态加载数据？另外，对于终端用户来说，我只需要返回 Grapesjs 生成的 html+cas 文件，对吧？

stf1981

所以每次组件加载时，它都会通过 JS 脚本动态加载数据？是的另外，对于终端用户，我只需要返回由 Grapesjs 生成的 html+cas 文件，对吧？是的，组件里的 JS 脚本在 HTML 里，参见 'editor.getHtml（）'

查看详情

#36272021年7月17日作者 sanchit364 个回答

4 个反应

style-manager 提问组件 typescript

：我正在尝试复制页面，但由于 ID，样式无法应用，结尾的 -2，-3 发生了变化。

“JavaScript const duplicatePage = （编辑者） => { let components = editor.getHtml（）; 令 css = editor.getCss（）; 让newPage = 编辑器。Pages.add（{ 样式：CSS，组件：组件， }); 编辑。Pages.select（newPage）; }; ``` 这就是我的功能。我正在尝试复制页面，HTML部分没问题，但由于CSS是通过ids应用的，当新页面渲染时，id的结尾会变为-2。有没有什么方法可以防止这种情况，或者有其他方法可以做到这一点？

OrigoVl

@sanchit36 你好，你在解决问题吗？你能说出来吗？

vlont

用这个 “''js const page = 编辑？。Pages.getSelected（）; 编辑？Pages.add（{ id：（page.get（'name'） || page.id） + '-copy'， component： page.getMainComponent（）.clone（） }， { select： true }）;'''

leonardolima99

@vlont 谢谢！

查看详情

#36202021年7月13日作者 jamesshin54 个回答

0 个反应

组件常规