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:

  1. 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.

  2. 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.

  3. Since the SPA can't access the parent of the iframe where it runs, you need to modify the @magnolia/template-annotations  to never access the parent window: Example
    Rebuild your SPA with this updated template-annotation library.

  4. Create a listener in your SPA which will reload the content when the postMessage containing {action: "refresh"} in the data is received: Example

  5. Start the SPA with npm start, and take a note of the URL it runs on.
  6. Point the page editor iframe to an external URL by setting the url  parameter instead of templateScript  parameter 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.

  • No labels