如何移动组件
可能有必要添加一个新的“component.move(desComponent, opts)”方法来应对这种情况,但目前你可以用以下方式实现: “''js const selected = editor.getSelected(); select.remove({ temporary: true });临时选项可以避免移除与组件相关的样式 editor.getWrapper().append(selected, { at: 0 }); ```
阅读下方完整回答 ↓问题
亲爱的,你好:
我想用程序方式把一个组件移动到封装器的首尾,我记得像editor.getWrapper().add(editor.selectedComponent(), {at: 0});,但这是从selectComponent添加一个新的克隆,
也许在位置设置触发器“排序器:拖动:结束”?
你能帮我吗?
抱歉我的英语不好 :')
回答(2)
可能有必要添加一个新的“component.move(desComponent, opts)”方法来应对这种情况,但目前你可以用以下方式实现: “''js const selected = editor.getSelected(); select.remove({ temporary: true });临时选项可以避免移除与组件相关的样式 editor.getWrapper().append(selected, { at: 0 });
谢谢你举报,@alemenciones。 关于如何移动组件的问题非常好。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期 editor.on('component:mount', (c) => console.lo...
相关问答
通过相似的问题讨论继续研究。
问题 #5211
漏洞
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? v9.2 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 我在 Vue3 项目中使用它 当我想添加新组件时,页面会挂机且没有响应 这是我的代码: 行为...
问题 #5775
Component.get('traits').clone() 已不再可用。
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Arc 版本 1.35.0 / Chromium 引擎 123.0 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?开放开发工具选...
问题 #3627
:我正在尝试复制页面,但由于 ID,样式无法应用,结尾的 -2,-3 发生了变化。
“JavaScript const duplicatePage = (编辑者) => { let components = editor.getHtml(); 令 css = editor.getCss(); 让newPage = 编辑器。Pages.add({ 样式:CSS,...
问题 #4792
20.2版本的拖放功能失效了
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v108可复制演示链接 见下文描述一下那个虫子 如何复现这个漏洞?创建自定义组件将其作为组件和可拖拽块添加到编辑器中添加组件时将编辑器设置为绝对拖拽模式,丢弃后再将组件本身设为绝对拖拽。...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
教程
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
浏览插件分类
直接跳转到市场上的插件分类页面。