0

我正在尝试在grapesjs 的编辑器中渲染一个使用Vue 创建的网站。但我一直无法成功加载它。我知道这应该是可能的，因为编辑器使用 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>
4

1 回答 1

0

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

于 2021-06-06T15:32:01.833 回答