Background
The traditional page-editor generates greenbars in the iframe. However, that is not possible when the iframe points to a different origin (due to cross-origin security checks).
That's why we decided to create a postMessage "bridge" that connects the client-side javascript with Magnolia.
The server-side, handling the postMessage communication, is integrated since 6.2.11-SNAPSHOT in both CE and DX bundles:
PAGES-426
-
Getting issue details...
STATUS
However, the client-side is still in early stages and several steps to get it running are required:
Steps:
- Build the https://git.magnolia-cms.com/users/rsiska/repos/pages-editor-external module with Maven.
This produces a javascript file, CSS file for the page-editor, and the CSS for Magnolia Icons. - Include all of these in your frontend project.
One way is to include the javascript right in the index.html file: Example
However, this is a mere workaround and there are better approaches coming. See the ongoing discussion on this page. - Since the SPA can't access the parent of the iframe where it runs, you need to modify the
@magnolia/template-annotationsto never access the parent window: Example
Rebuild your SPA with this updated template-annotation library. - Create a listener in your SPA which will reload the content when the postMessage containing
{action: "refresh"}in the data is received: Example - Start the SPA with
npm start, and take a note of the URL it runs on. - Point the page editor iframe to an external URL by setting the
urlparameter instead oftemplateScriptparameter in the page templates of your light-module. (See PAGES-442 - Getting issue details... STATUS for details)
To see it in action quickly, you can check out this branch of frontend-helpers which implements all of the above. The page-editor javascript and CSS files are included as well.
Simple npm install && npm run build and then npm start in samples/spa-react-minimal should be all that's needed.