I'm trying to render a website created with Vue inside grapesjs' editor. But I haven't been able to successfully load it. I know it should be possible as the editor uses an iframe to load its data and if I modify the created iframe the attribute src="https://www.trinacia.com" it loads the website in the view; nevertheless, this method doesn't allow me to modify the website using grapesjs' editor, so it is not a real solution for me.
My code looks like this:
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();
The website I'm trying to load into the editor can be found here: https://www.trinacia.com
The HTML for that website is:
<!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>
I figure out that the injected js from the vue application modified the iframe document and breaks the grapesjs document structure, so in order to actually get the website to render I had to use the crhome selenium API at a backend service and extract all the document components after the Vue app created all the required DOM elements and inject them in the grapesjs as components.