PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #1280💬 已回答提出于 2018年7月12日作者 HakuTheWolfSpirit0 个反应

在 grapessj 编辑器中渲染第三方组件

快速解答作者 artf

如果你用带编译器的版本,Vue 在运行时就能编译。就像这个组件 https://github.com/alexjoverm/v-runtime-template第二个问题,我想知道是否可以从组件内部钩入编辑器的事件 是的,你可以通过“this.em”从组件访问编辑器模型。 “''js someMethodInComponent() { cont { em } = this; em.on(“某事件”,...); em.once(“某事件”,...); em.trigger(“某事件”); // ... } ```

阅读下方完整回答 ↓

问题

你好,

我们希望渲染第三方控制。这是一个普遍性的问题,我们想知道我们是否走在正确的方向上。 为了渲染控制,我们需要使用第三方技术(Vue、React或类似框架)。这两个框架有一个共同的问题:它们在运行时渲染组件的能力滞后。

例如,Vue 的问题在于它移除了包装节点及其子节点。完全可以重建HTML结构。然而,Backbone似乎不喜欢这个版本,模型丢失了,因此编辑器也无法正常工作。

或者,也可以在其组件的渲染函数中渲染组件。但Vue可能做不到。

我还没用 React 测试过 Grapes,但有可能 React 能够在运行时编译模板。

你有什么建议吗?你有没有我们可能忽略的方法?

第二个问题,我想知道是否可以在组件内部从编辑器中挂钩事件。我想在触发“canvas:drop”事件时执行一些代码。目标是通过拖放和以方块形式调整大小来实现绝对定位,直到路线图功能实现。

提前感谢你的回复。

回答(3)

artf• 2018年7月15日

如果你用带编译器的版本,Vue 在运行时就能编译。就像这个组件 https://github.com/alexjoverm/v-runtime-template

第二个问题,我想知道是否可以从组件内部钩入编辑器的事件

是的,你可以通过“this.em”从组件访问编辑器模型。 “''js someMethodInComponent() { cont { em } = this; em.on(“某事件”,...); em.once(“某事件”,...); em.trigger(“某事件”); // ... }

HakuTheWolfSpirit• 2018年7月31日

你好,谢谢你的回答。

如果你用带编译器的版本,Vue 会在运行时编译。就像这个组件 https://github.com/alexjoverm/v-runtime-template

Vue的问题在于,没有一种方法能让我输入字符串作为参数,输出html。 我已经在StackOverflow上问过这个问题,希望不久后能得到答案。

是的,你可以通过 this.em 从 components 访问编辑器模型

👍

artf• 2018年8月2日

Vue 的问题在于,没有真正的方法能让我输入字符串作为参数,输出 html。我已经在StackOverflow上问过这个问题,希望不久后能得到答案。

是的,但你总可以创建一个元素,在运行时挂载 Vue 实例,然后获取它的 HTML 内容

相关问答

通过相似的问题讨论继续研究。

问题 #1888

在画布内添加自定义HTML

你好, 我用 grapes 导出一个包含所有信息的自定义json,而不是用HTML和CSS。 为此,我解析存储在localStorage上的gpjs组件。 现在我需要自定义组件在Canvas中的渲染方式。 举个例子,我有一个输入组件,包含两个特征(标签和值),我想在画布里渲染它...

3 个回答更新于 2020年4月2日

问题 #921

从面板按钮中选择并聚焦一个HTML元素

大家好, 有没有可能用Grapes设置 HTML 中的 section focus,比如作为锚点?我有一个面板按钮,它只是选择我想要的section,但不会选择聚焦到元素。代码如下: panel.addButton('options', [{ 编号:“链接”, 班级名称:“fa...

3 个回答更新于 2020年6月25日

问题 #943

:勾选框特性未勾选时不移除属性

当 html 属性为真或假时,应该要么存在,要么不存在。 例如, required。HTML5 中没有这个值。 有效(非必需): 有效(必填): 无效(非必需): 无效(必填): 当 HTML grapes 在 Grapes 外渲染并检查输入是否需要时,这个方法失败了,因为 C...

3 个回答更新于 2020年5月6日

问题 #1985

远程存储的自动保存不会发送网络请求

操作系统:Windows 10 浏览器:Chrome 73 GrapesJS 版本:'0.14.57' 我用这个调用 'grapesjs.init()' 配置了远程存储: 虽然我在Chrome开发工具的网络标签里看到“/load”请求触发,但无论我在编辑器里做多少修改,都没看到...

3 个回答更新于 2020年5月6日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。