#34352021年5月6日作者 anlumo1 个回答
版本: 0.17.3 你能重现演示中的bug吗?[ ] 是的[X] 不 预期的行为是什么? 能够覆盖组件的“model.default.scrollable”中的onStart、onEnd和updateTarget,详见[文档](https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js)。 详细描述那个漏洞 我创建了一个扩展 ComponentImage 的组件。内容不是静态图像,而是根据需要渲染,当目标尺寸变化时,必须重新渲染。 根据文档,我应该可以在 'model.default.scrollable' 中定义 'onEnd',在调整大小完成后触发重新渲...
ClaudeCode
谢谢你举报,@anlumo。 Scrollable onStart/onEnd/updateTarget not Overridable 的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供...
#34132021年4月26日作者 theSC0RP4 个回答
在这种情况下,我建议你访问iframe的文档,手动添加内联脚本(要获取文档,请使用'editor.“。Canvas.getDocument()') Originally由@artf在 https://github.com/artf/grapesjs/issues/2012#issuecomment-496304498发布 嘿,@artf,我正在看#2012号,有些疑问。 如果脚本发生了更改,比如点击时的提醒消息。然后会加入多个事件。如何移除旧事件并添加新事件(无需保存和重新加载)。 一种方法是刷新iframe,但这会导致所有事件丢失(甚至是预定义的)。 你建议怎么做?
theSC0RP
我尝试按照以下步骤更新内联脚本:获取iframe文档:“iframeDoc = 编辑器。”Canvas.getDocument()'获取文档正文的内HTML格式:“iframeDocBodyHtml = iframeDoc.body.innerHTML”替换正文的内HTML:'iframeDoc.body.innerHTML = iframeDocBodyHtml'重新附加内联脚本 这样做会导致内置的 Grapesjs 事件丢失,比如悬停或组件选择(这很明显,因为所有事件都...
theSC0RP
我尝试通过写“editor.trigger('core:component-select')”来添加select和悬停事件,但也没用,而且执行“editor.runCommand('core:component-select')”会出错。 我是不是漏掉了什么?
artf
嗯,我觉得添加一个简单的强制重渲染iframe的方法(虽然不常见,但在某些情况下肯定有用)应该不错。不幸的是,目前你应该尝试使用私密方法,检查一切是否如预期,确认后我很乐意为类似“frame.trigger('rerender')”添加监听器。 现在我建议你试试类似的做法 “''js 看看画面的实际视角 const frameView = 编辑器。Canvas.getFrame().view; 一旦移除frameView,我们就必须重新渲染该帧 包装视图(包含工具栏和框架本...
#34062021年4月20日作者 vatte212 个回答
大家好,我想把 Canvas 上的数据保存到 Redux 存储,这样可以,但重新加载页面后,存储加载方法没有把我的数据设置为构建器(Canvas),我不知道问题出在哪里,如果有人有解决办法请告诉我。 代码示例: “''js Grapejs.init({ .../// storageManager: { 类型:“redux-storage”, 自动保存:错误, 自动装填:1, }, .../// }); const reduxStorage = {}; const storageManager = editor.StorageManager; storageManager.add('redux-storage', { load(ke...
artf
去掉这个“const resultKey = key.slice(4);”。你用前缀存储数据,但加载时没有
ClaudeCode
谢谢你举报,@vatte21。 关于如何创建自定义存储管理器,它不会在重新加载页面后设置Canvas保存数据,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () =>...
#34052021年4月20日作者 chrisijoyah4 个回答
警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么? 详细描述你的功能需求详细 目前有一个事件可以连接到“canvas:drop”,可以访问掉落的模型。在将方块放入画布之前,我想先...
artf
你好@chrisijoyah你试过用'canvas:dragdata'吗?这里举个用法示例 https://jsfiddle.net/artur_arseniev/87rcb24n/
chrisijoyah
你好@chrisijoyah你试过用“canvas:dragdata”吗?这里举个用法示例 https://jsfiddle.net/artur_arseniev/87rcb24n/ 这是否意味着我可以阻止丢失的模型被添加到画布中?理想情况下,我想做一些检查,确定拖曳后的方块是否可以被放入某个区域,如果通过检测,我想在添加之前阻止它被放入。有没有办法做到这一点?我能不能做类似“result.content='' 或者类似...... “''js editor.on('can...
artf
我能做类似result.content= ''的操作吗? 是的,你应该能用这个技巧做到这一点。你能多说说你的使用场景吗?你想做什么样的检查?
#33902021年4月6日作者 christosapos2 个回答
通过点击Canvas内的组件,能否更改复选框组件简单中的“勾选”特性?
artf
是的,当然,性状读取的是组件模型的值,所以如果你更改绑定值,性状应该会改变
ClaudeCode
谢谢你举报,@christosapos。 关于通过点击“组件内部”更改复选框组件特征的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...
#33852021年4月3日作者 pranay22102 个回答
我正在尝试用 nuxtjs 框架来完成 grapesjs,有什么解决方案吗?
artf
我觉得关键是为GrapesJS创建一个Vue组件,并在你的一些页面中使用它
ClaudeCode
谢谢你举报,@pranay2210。 关于如何将葡萄与nuxtjs一起使用?的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something ch...
#33742021年3月31日作者 FacuCarbon2 个回答
你好,我遇到了一个问题,就是当把视频或图片添加到画布时,画布不是居中,而是偏向左边。借助面板,我设定了对齐,但它也无法居中。 
Ju99ernaut
试着把它放进容器里,你可能可以用Flexbox之类的东西把它居中。
ClaudeCode
谢谢你举报,@FacuCarbon。 感谢你分享关于图片和视频没有聚焦的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地识别和优先排序修复。Grapes...
#33462021年3月18日作者 xinnai4 个回答
我想用像 Element-UI 这样的 UI 框架自己构建样式管理器,快速做出一个美观的界面。但我该如何将属性绑定到选定的组件上?我没看到像“setProperties to an element...”这样的API。你能帮我讲讲怎么做吗,非常感谢!!
RutujaBadbe
#2296 这可能对你有帮助!
artf
我想如果你需要从零开始创建样式管理器,这种方法应该可行 “''js 让targetsToStyle = []; const eventToListen = 'component:toggled component:update:classes change:state change:device'; const sm = 编辑。风格经理; editor.on(eventToListen, () => { targetsToStyle = editor.getSelected...
xinnai
@artf 这正是我需要的!非常感谢!
#33452021年3月17日作者 joshk1324 个回答
我正在努力让葡萄Vue.js工作,但没有进展,我一直在跟着起步,但没能让它正常工作。到目前为止,我已经把它加到了“mounted()”部分,也拿到了带方块的按钮可以显示和添加,但[面板和按钮部分](https://grapesjs.com/docs/getting-started.html#panels-buttons)一直没成功。 问题总结:使用Vue.js我无法让面板和按钮部分从开始时显示出来。 下面我附上了我目前主要想添加的App.vue文件——概念验证会稍后移到合适的位置。
uchoaaa
看看这个问题,可能会有帮助:https://github.com/artf/grapesjs/issues/275
artf
你好@joshk132说代码看起来不错,你能做一个可复现的演示吗(比如Codesandbox之类的软件)?
joshk132
@artf我已经让面板显示的位置正常工作了,但现在显示不正常了。我不得不做的解决方案是改用下面的代码。基本上我必须把“editor”作为变量,但我在最初的代码里已经去掉了,因为 vue linter 会抱怨。附上了一张图片链接,展示了下面代码的效果,我不太确定具体是什么原因导致了样式问题。 https://imgur.com/GuFqv0o
#33422021年3月17日作者 RutujaBadbe2 个回答
嗨! 我尝试过在Canvas和index.html中添加jQuery。 我正在这样用canvas添加它—— 'canvas = 编辑。画布; const script1 = document.createElement('script'); script1.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; canvas.getDocument().head.appendChild(script1);' 在HTML页面里我把它加成了script标签——'<script src=“https://code.jquery.com/jquery-3.6.0.min.js”></scr...
artf
这里你可以看到如何正确加载依赖 https://grapesjs.com/docs/modules/Components-js.html#template-related
ClaudeCode
谢谢你举报,@RutujaBadbe。 错误 ReferenceError: $ 未定义 发生在 Canvas 尝试访问属性时,尚未完全初始化组件生命周期。这是GrapesJS中常见的竞争条件。 立即解决办法: 如果你控制代码,可以用空检查包裹调用: “JavaScript 如果(component && typeof component.getDocument === 'function') { 你的准则 } ``` 根本原因分析: Canvas 在调用 'getDocu...