GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#32452021年1月21日作者 bgrand-ch3 个回答
0 个反应

Grapesjs-custom-code 无法<script>从 GrapesJS 0.16.30 及以上版本执行

'grapesjs-custom-code' 在 'script' 标签下运行良好,直到 GrapesJS 0.16.27 版本后,不再执行任何“script”内容。 ✔️ 编辑器初始化() 选项 : 'allowScripts: 1' ✔️ 插件导入:https://github.com/artf/grapesjs-custom-code/issues/11#issuecomment-724512902 这和 https://github.com/artf/grapesjs/issues/3244 有关吗?

nithinpillalamarri123

你好,非常感谢你,重播...... 是的,完全正确,重放后我尝试了0.16.27自定义方块脚本,但比0.16.27版本更稳定,拖放自定义方块脚本正常运行,保存并重新加载模板后用 editor.setComponents(html 文本为字符串);HTML运行正常,但脚本无法使用。 我用脚本吸收了这个,代替了“这种符号被浏览器理解代码取代的”< >,所以我尝试在浏览器中部署那个 HTML,运行正常,但脚本在本地加载已存模板时无法工作。 如果有人有最新版本的解决方案,请帮我脱离...

artf

你好,@bgrand-ch,你说的可能是一个修复的bug。 😂 不应该让用户执行随机脚本的主要原因:自XSS如果在编辑器中执行脚本,我们无法控制,例如,用户将 '<script>document.body.innerHTML = “”</script>;编辑也坏了。 实际上,有一个选项表明这是设计中的 'placeholderScript |内容显示自定义<script>代码包含

ClaudeCode

谢谢你举报,@bgrand-ch。 关于grapesjs-custom-code无法<script>从GrapesJS 0.16.30及以上版本执行的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“se...

#32442021年1月21日作者 nithinpillalamarri1233 个回答
0 个反应

Grapes JS 版本 v0.16.34 加载已保存的 HTML 后出现意外脚本代码

附加代码: 保存HTML时: <div class=“gjs-row”> <div class=“gjs-cell”> <div class=“gjs-row”> <div class=“gjs-cell”> <div id=“i6x6”> <div id=“bsrne9exd5” style=“height:300px” tg=“DataGrid” tagName=“DataGrid” class=“ag-theme-alpine”> </div> </div> </div> <div class=“gjs-cell”> <div id=“ibc4”> <div id=“3drqn6v2q5” style=“height:300...

nithinpillalamarri123

请大家帮我解决这个问题 editor.setComponents(html 文本); 从已保存的模板HTML加载脚本后,脚本没有按预期运行 拖放保存后用 editor.setComponents(html 文本)加载 HTML 后,它就能正常工作; 然后用现有的脚本替换像“< >这样的符号,用浏览器相关的代码,这种情况只在版本0.16.34中出现

artf

你无法将生成的HTML代码加载回编辑器,请阅读关于如何正确存储和加载模板的文档 https://grapesjs.com/docs/modules/Storage.html

ClaudeCode

谢谢你举报,@nithinpillalamarri123。 感谢你分享关于 grapes js 版本 v0.16.34 在加载已保存的 html 后出现意外脚本代码的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你...

#32432021年1月20日作者 hanna4042 个回答
0 个反应

Textable属性无法工作并引发异常

版本: 0.16.27 至最新 你能重现演示中的bug吗? 是的 [X] 是的 [ ] 不 预期的行为是什么? 将文本块插入另一个文本块内 详细描述那个漏洞 在添加新块,甚至创建新的自定义类型时,“textable属性”并未如预期和描述那样工作。此前没有类似报道, ![图片](https://user-images.githubusercontent.com/62241042/105239315-75c3ce80-5b75-11eb-9692-980eeef9b3a7.png) ![图片](https://user-images.githubusercontent.com/62241042/105239511-82e0bd80-5...

artf

#2771的复制品

ClaudeCode

谢谢你举报,@hanna404。 Textable属性无法工作并引发异常的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别根...

#32422021年1月20日作者 Nielsticot4 个回答
0 个反应

当样式管理器在另一个 div 中时,“使用样式管理器前选择元素”的消息不显示

版本:0.16.34 预期的行为是什么? 编辑器初始化时,没有选择任何元素,因此样式管理器应像编辑器配置中未使用“appendTo”时一样,提示“使用样式管理器前选择元素”。 目前的行为是什么? 在编辑器配置中使用“appendTo”时,像这样: 样式管理器开始时显示所有扇区,但未选择任何元素 演示 同样的行为也可以在 https://grapesjs.com/docs/getting-started.html#style-manager 的例子中看到

mosh-tudor

我用这段代码来解决这个问题: “''js const showStylesSector = editor => { const stylesButton = 编辑器。Panels.getButton(“panel-sidebar-header”, “show-styles”); const layersButton = 编辑器。Panels.getButton(“panel-sidebar-header”, “show-layers”); 如果图层管理器处于激活状态,请禁用...

Nielsticot

这不是我想要的,我的问题是在选择任何元素之前,也就是在触发“component:selected”事件之前。 我通过在编辑器加载时选择一个元素暂时解决了这个问题,但这并不是我真正想要的

artf

如果你在自定义元素中使用 StyleManager,那你必须自己处理那个状态。 '''html <div class=“sm-wrapper”> <div id=“styles”></div><!-- 这里是你添加样式管理器 --> <div class=“sm-empty-state”> 选择一个元素 </div> </div>

#32392021年1月18日作者 harsh2014 个回答
5 个反应

如何动态地从组件脚本更新属性/属性?

我们有一个用例,想用 [Highcharts Editor](https://github.com/highcharts/highcharts-editor) 动态插入图表。我创建了一个组件,拖拽后会打开基于模态的组件,根据用户选择返回一个SVG图像。 我想知道如何把它加到模型的身体里。目前我用 innerHTML 插入,但 getHTML 的 div 里没有 SVG 图片。 组件代码: “'' js domc.addType('charts-component', { 型号:{ 默认值:{ 标签名称:“div”, 脚本, js: '', SVG: '', 属性:{ 类别:“高图”, }, '剧本道具': ['js', 'SVG'...

artf

在这种情况下,你不需要用 JS 组件(在你的最终代码中你不执行任何 JS),对你来说,这样就足够了: “''js domc.addType('charts-component', { 浏览量:{ 事件:{ dblclick:“onActive”,// 以便双击重新打开模态 }, onActive() { const { model } = this;模型是分量 const modal = 高。ModalEditor(({ export }) => { 静态内容使用“cont...

harsh201

抱歉发了垃圾信息。我无法从工作笔记本上传使用场景视频。 https://user-images.githubusercontent.com/2502711/106098322-d39c7b80-615e-11eb-8569-cf76ffc7fcc7.mov

harsh201

@artf 任何帮助都将不胜感激。我又看了一遍文件,也没发现什么特别的地方,可能我漏掉了。

#32382021年1月18日作者 sizhousama3 个回答
1 个反应

:如何加载外部JavaScript,我尝试了所有方法,没用

我用块写html字符串,需要引入很多外部脚本和样式,但我尝试了所有方法,拖动块到画布时脚本不生效,样式可以加载,希望能得到帮助。通过附加子加载 ![图片](https://user-images.githubusercontent.com/40018231/104894741-fbc0f900-596c-11eb-9d92-2d5c1e59f4d3.png)init load by canvas:{scripts:[...]} ![图片](https://user-images.githubusercontent.com/40018231/104894830-14c9aa00-596d-11eb-909f-e6bcf2aa6cef...

harsh201

@sizhousama我在初始化Grapesjs编辑器时通过Canvas加载脚本/样式表,对我来说是正常的。 “'' js 画布:{ 剧本:['https://unpkg.com/abc.js'], 风格:['https://unpkg.com/abc/dist/css/abc.min.css'], }, ``` 更多详情可见[这里](https://grapesjs.com/docs/modules/Components-js.html#dependencies)。 希望...

sizhousama

控制台显示已加载 ![图片](https://user-images.githubusercontent.com/40018231/104895114-62dead80-596d-11eb-9f6e-0b73d17b3f02.png)

ClaudeCode

谢谢你举报,@sizhousama。 关于[问题]:如何加载外部JavaScript,我尝试了所有方法,都没用。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => consol...

#32372021年1月15日作者 Abhisheknanda13444634 个回答
2 个反应

添加特征 包装

你好@artf 我就是这样加了包裹特性。 我该如何执行初始化函数 这是代码 “''js editor.getWrapper().set('traits', [ { 变革提案:1, 名称:“ABC”, 标签:“ABC”, 类型:“勾选框”, 变革提案:1 }, ], ) ``` @artf 你能帮帮我吗? 谢谢。

artf

你可以在init https://github.com/artf/grapesjs/blob/69e5ab2c1176e6fdeac1b058398cca55efe92df3/src/dom_components/config/config.js#L9 上用组件里的这个选项 附言:别再用你的问题烦别人了,拜托,否则我得把你从这个仓库拉黑

Abhisheknanda1344463

抱歉@artf我会记住的。 谢谢

Abhisheknanda1344463

@ryandeba 有什么建议吗?

#32342021年1月15日作者 tonypartridge1 个回答
0 个反应

绝对模式和动态标签位置不正确......

我遇到这个问题......我有一个“文本”框,设置为全宽,但中心放一个名字短码。然后生成PDF和HTML页面,并期望名称会成为核心。但由于名称大小可能不同,我刚意识到绝对定位仍然是取容器大小的值,而不是设定宽度。相关示例见附图。 我们有什么建议能解决这个问题吗? 我们在生成HTML和PDF文档时使用绝对定位。 ![葡萄-j-design](https://user-images.githubusercontent.com/1400982/104709811-3fbac080-5717-11eb-8656-66a2db1ec600.png) ![葡萄-js-html](https://user-images.githubuserco...

ClaudeCode

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

#32332021年1月15日作者 Abhisheknanda13444632 个回答
0 个反应

在每个组件上设置工具栏

你好@artf 有没有什么标准方法可以在每个组件上添加一个新工具栏 我试过这种方法 “''js 编辑。Components.getTypes().map(type => { 编辑。Components.addType(type.id, { 型号:{ 默认值:{ 工具栏, 特质:[ ...编辑。Components.getType(type.id).model.prototype.defaults.traits, ...[ ] ] }, } }) }); const toolbar = [{ 属性:{ 等级:“Fa Fa-Arrow-Up” }, command: e => e.runCommand('core:component-...

artf

按照问题模板(版本、实时演示等)操作。

ClaudeCode

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

#32322021年1月15日作者 matiasmasciotta2 个回答
0 个反应

拖放组件:

你好,我遇到了以下问题: 我需要一个事件类型编辑器(“sorter: drag: end”),在所有这些情况下都会被投掷: (检测我投放的元素和位置) 1- 当你从blockManager拖放一个元素并放到画布上时,让它听到。 2- 当你把已经组件化的元素从画布拖到画布的另一个区域时,让它听到声音。 3- 当我在 layerManager 中移动元素时会听到这个声音。 用排序器我解决了情况2,1没有出现,因为元素还没有被分成,所以在尝试添加属性时,在被分成之前,它作为标准元素被添加到html画布中,忽略了我手动添加的属性。 你能帮我吗? 谢谢

bgrand-ch

你好, 对于未来的问题或技术问题(非漏洞),GitHub的[讨论](https://github.com/artf/grapesjs/discussions)标签是最佳选择。 如果问题已解决,请关闭,或在[讨论](https://github.com/artf/grapesjs/discussions)->[问答](https://github.com/artf/grapesjs/discussions/categories/q-a)类别写一条详细的新消息(并关闭本期)。...

ClaudeCode

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

浏览所有主题