#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...
#33412021年3月15日作者 HeyWrecker4 个回答
你好, Facebook社交媒体组件是用来提供指向企业或组织Facebook页面的链接,还是专门用来分享与你时间线相关的内容?看起来是后者,尽管我觉得这有点反直觉,因为很多邮件的页眉和页脚只是提供社交媒体账户的链接。我只是想确认一下它的设计方式,以及如果它确实按设计正常运行,有没有什么变通方法或计划改变这种行为。 此致, 里克
artf
我猜你就是在找这个 https://github.com/artf/grapesjs-mjml
HeyWrecker
作为后续,我确认了Instagram社交部分确实链接到了Instagram的主页。而Facebook选项则不链接到Facebook页面。
#33352021年3月11日作者 zachsnoek3 个回答
我有一个组件使用了“background-url”样式管理器属性: 我想重用样式管理器中显示的这个UI,作为“设置”下显示的背景URL特性:  有没有可能让样式管理器的属性像特质一样表现,并显示在“设置”部分,还是我需要用这个界面创建一个新的特质? 谢谢。
artf
遗憾的是,目前还无法实现,但计划很快添加一个新的UI模块,应该可以重复使用UI元素
ClaudeCode
谢谢你举报,@zachsnoek。 关于用样式管理器属性UI创建特质的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something...
#33342021年3月11日作者 KernelDeimos2 个回答
版本: 0.16.44 你能重现演示中的bug吗? [ ] 是的 [x] 不 预期的行为是什么? 真的,其他任何东西都行 详细描述那个漏洞 我当时正试图将脚本加载到画布中。我第一次尝试是“脚本:[]”,然后遇到了这个PR帖子里提到的同步问题:https://github.com/artf/grapesjs/pull/67 我看到@artf的一个例子展示了另一种用一个叫“components”的属性来实现。这样做会导致JavaScript解析器失效。我不是开玩笑;我发了截图来证明。 还有一点有趣的是:控制台里写着“TAG LOAD”的文字来自我试图加载的脚本。所以......成功了吗?尽管页面因语法“无效”而崩溃。 目前的行为是什么...
KernelDeimos
我有一阵子没用内联“<script>''标签了,也忘了HTML解析器的这个限制。关上这个。
ClaudeCode
谢谢你举报,@KernelDeimos。 尝试将脚本加载到Canvas时,可能会破坏JavaScript的问题?? 似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSa...
#33312021年3月10日作者 Abhisheknanda13444634 个回答
你好@artf 我按照文档制作了一种新型资产管理公司 这里(https://codepen.io/abhi_punk81/pen/MWbWzaq) 我创建了类似文档里那种的新类型 我如何在放置自定义图标块后打开那个资产管理器 -: 一开始它没问题,但当我放下图片块后,默认情况下就会出现一个 请你指点一下我,我正在尝试为 Icons One 创建一个新的插件 根据之前提到的问题,我用add command(添加命令)来调用图标组件的comnd,卡住了:双击时怎么更新目标-: “''js const cm = 编辑。指挥; cm.add('svg-icon', { run(editor, sender, opts) { const a...
Abhisheknanda1344463
@artf 实现了,并且还能处理大小写不区分 https://user-images.githubusercontent.com/20657737/112457190-82d18980-8d81-11eb-895b-b5c42e849f3a.mov 谢谢!!❤️
Abhisheknanda1344463
嗨@artf不知怎么的我做到了 在组件激活时,我把这个标记为 -: “''js 事件:{ dblclick:“onActive” }, onActive () { 编辑。AssetManager.render(editor.AssetManager.getAll().filter(asset => asset.get('type') == 'svg-icon')); editor.runCommand(“open-assets”, { 目标:This.model, });...
artf
应该和你之前做的类似 “编辑。AssetManager.render(editor.AssetManager.getAll().filter(asset => asset.get('type') == 'svg-icon'));' 所以通过搜索找到资源,然后用渲染更新
#33302021年3月10日作者 RaresVlaiduc1 个回答
又见面了! 当前情况:我开始剪辑在图层管理器中,我最大化了移动容器(箭头图标)的宽度,这样我可以通过点击任意方向拖动元素我在编辑器中快速移动,不小心移动了图层,而不是选择它 我想要的:例如,我想将移动事件的开始提前300毫秒,这样在这300毫秒内只触发选择动作 你知道移动时触发的事件叫什么吗(来自图层管理器)。 谢谢! LE: component:drag:start 是事件
ClaudeCode
谢谢你举报,@RaresVlaiduc。 关于组件启动移动时触发的事件,这个问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')...
#33292021年3月10日作者 imouou4 个回答
你好,@artf,这是一个很棒的框架,非常感谢。 我现在用它来创建移动版 BUI 框架的组件,遇到了一个问题,我添加了自定义的特性文本区,我该如何制作这个?当数据发生变化时,它会在输出脚本中触发。 “''js 编辑。TraitManager.addType('textarea', { createInput({ 特质, 组成部分 }) { 这里我们可以决定使用性状中的性质 const el=document.createElement('div'); el.innerHTML = ' <textarea class=“buiv-textarea” name=“${options[0].name}” rows=“${options[...
Ju99ernaut
你需要在“剧本道具”中添加这个特质,你可以在这里阅读更多内容 https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts
imouou
谢谢@Ju99ernaut,如果是某些内置功能,修改脚本时可以接收参数值,我目前遇到问题:自定义功能“textarea”可以触发DOM等更改,但导出脚本无法接收该参数的值,即使脚本道具设置为“datas”。
Ju99ernaut
你可以尝试强制脚本更新: “''js 编辑。DomComponents.addType('slide', { 型号:{ // ... init() { this.on('change:datas', () => this.trigger('change:script')); }, }, // ... }); ```
#33282021年3月9日作者 D-Rosa994 个回答
你好。 Grapesjs是个很棒的工具。谢谢你。 我想通过输入更新组件的文本值,我该怎么做? 如果用户在输入框中填写类似“茶站,标题应改为该网站 
artf
只要找到组件,然后按你的想法更新它 “''js cont typedByUser = '类型某物...'; const cmp = editor.getWrapper().find('.any-query-selector')[0]; cmp && cmp.components(typedByUser); ```
millord
我也想用类似的 Grapes 应用,但用 React 通过控制输入更新文本组件。有人能帮忙吗?