文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在grapesjs的编辑器中渲染用Vue创建的SPA？

问如何在grapesjs的编辑器中渲染用Vue创建的SPA？
EN

Stack Overflow用户

提问于 2021-06-06 09:21:42

回答 1查看 151关注 0票数 0

我正在尝试渲染一个用Vue在grapesjs的编辑器中创建的网站。但是我还没能成功地加载它。我知道这应该是可能的，因为编辑器使用iframe来加载它的数据，如果我修改创建的iframe属性src="https://www.trinacia.com“，它会在视图中加载网站；然而，这种方法不允许我使用grapesjs的编辑器修改网站，所以它对我来说不是一个真正的解决方案。

我的代码如下所示：

HTML：

<div id="gjs">
</div>

JS：

const grapesjs = require(''grapesjs'');

const editor = grapesjs.init({
      container: '#gjs',
      allowScripts: true,
      components: '<div id="app"></div>',
      canvas: {
        scripts: [
          {
            src: 'https://www.trinacia.com/js/chunk-00744b8a.c4aad12d.js',
            rel: 'prefetch',
          },
          {
            src: 'https://www.trinacia.com/js/chunk-4f5311ba.cb4a3329.js',
            rel: 'prefetch',
          },
          {
            src: 'https://www.trinacia.com/js/chunk-6366e45f.210d4ac5.js',
            rel: 'prefetch',
          },
          {
            src: 'https://www.trinacia.com/js/chunk-658805ed.26c40976.js',
            rel: 'prefetch',
          },
          {
            src: 'https://www.trinacia.com/js/compute.111be4ce.js',
            rel: 'prefetch',
          },
          {
            src: 'https://www.trinacia.com/js/app.f7d0b0a9.js',
            rel: 'preload',
            as: 'script',
          },
          {
            src: 'https://www.trinacia.com/js/chunk-vendors.1a362517.js',
            rel: 'preload',
            as: 'script',
          },
        ],
        styles: [
          {
            src: 'https://www.trinacia.com/css/chunk-00744b8a.b37a4bad.css',
            rel: 'prefetch',
          },
          {
            src: 'https://www.trinacia.com/css/chunk-658805ed.a0213277.css',
            rel: 'prefetch',
          },
          {
            src: 'https://www.trinacia.com/css/chunk-658805ed.a0213277.css',
            rel: 'prefetch',
          },
          {
            src: 'https://www.trinacia.com/css/app.526274ca.css',
            rel: 'preload',
            as: 'style',
          },
          {
            src: 'https://www.trinacia.com/css/chunk-vendors.e2eba18d.css',
            rel: 'preload',
            as: 'style',
          },
          {
            src: 'https://www.trinacia.com/css/chunk-vendors.e2eba18d.css',
            rel: 'stylesheet',
          },
          {
            src: 'https://www.trinacia.com/css/app.526274ca.css',
            rel: 'stylesheet',
          },
        ],
      },
      storageManager: false,
});
editor.render();

我尝试加载到编辑器中的网站可以在这里找到：https://www.trinacia.com

该网站HTML为：

<!DOCTYPE html>
<html lang="">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <link rel="icon" href="/favicon.ico">
      <title>Trinacia</title>
      <link href="/css/chunk-00744b8a.b37a4bad.css" rel="prefetch">
      <link href="/css/chunk-658805ed.a0213277.css" rel="prefetch">
      <link href="/css/compute.16404adf.css" rel="prefetch">
      <link href="/js/chunk-00744b8a.c4aad12d.js" rel="prefetch">
      <link href="/js/chunk-4f5311ba.cb4a3329.js" rel="prefetch">
      <link href="/js/chunk-6366e45f.210d4ac5.js" rel="prefetch">
      <link href="/js/chunk-658805ed.26c40976.js" rel="prefetch">
      <link href="/js/compute.111be4ce.js" rel="prefetch">
      <link href="/css/app.526274ca.css" rel="preload" as="style">
      <link href="/css/chunk-vendors.e2eba18d.css" rel="preload" as="style">
      <link href="/js/app.f7d0b0a9.js" rel="preload" as="script">
      <link href="/js/chunk-vendors.1a362517.js" rel="preload" as="script">
      <link href="/css/chunk-vendors.e2eba18d.css" rel="stylesheet">
      <link href="/css/app.526274ca.css" rel="stylesheet">
   </head>
   <body>
      <noscript><strong>We're sorry but Trinacia doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
      <div id="app"></div>
      <script src="/js/chunk-vendors.1a362517.js"></script><script src="/js/app.f7d0b0a9.js"></script>
   </body>
</html>

grapesjs

javascript

vue.js

回答 1

Stack Overflow用户

发布于 2021-06-06 23:32:02

我发现来自vue应用程序的注入js修改了iframe文档并破坏了grapesjs文档结构，所以为了真正让网站渲染，我必须在后端服务中使用crhome selenium API，并在Vue应用程序创建所有必需的DOM元素后提取所有文档组件，并将它们作为组件注入到grapesjs中。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67855109

复制

相似问题

问如何在grapesjs的编辑器中渲染用Vue创建的SPA？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在grapesjs的编辑器中渲染用Vue创建的SPA？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在grapesjs的编辑器中渲染用Vue创建的SPA？
EN