Editing an SPA from Page Composer

You can enable contextual editing of an SPA to allow content contributors to browse to the app for editing in Page Composer, navigate inside the app, and edit content directly in the app.

If your SPA resides on a standalone application, you should move or embed the SPA inside a Jahia module. For example, move the SPA directly inside your [spa_name]-dx-module.

For example, if your SPA consists of a JavaScript SPA and simple bootstrapping HTML, you can copy the HTML code into a page template and then create a Jahia page named spa_name. Then, the JavaScript will be bundled inside the module.

To create a page template:

1. Create a template view (for example, jnt_template/html/template.spa_name.jsp) which will contain the HTML code.
2. In Jahia Studio, add a new page template using this view.
3. Then, create a page from the new template in your site. Verify that the SPA correctly displays.

After creating your page template, modify the application so that you can open it for editing in Jahia.

The app can detect that is in an edit frame by checking for the presence of window.parent.jahiaGWTParameters. If Page Composer is detected, you should switch the router to memory or hash to avoid conflicts with the edit frame.

Finally, you can add Edit buttons to specific sections of the application so that they open Content Editor, Jahia application to edit any content item:

window.top.CE_API.edit(uuid, site, lang, uilang) (Content Editor 3.x)

window.top.CE_API.edit(config) (Content Editor 4.x)

Example 

window.top.CE_API.edit('f9fa345e-a579-4d69-a896-4a69e7aa33f1', 'digitall', 'en', 'en')

For Content Editor 4.x:

const config = {
               uuid: 'f9fa345e-a579-4d69-a896-4a69e7aa33f1',
               site: 'digitall',
               lang: 'en',
               uilang: 'en'
};
window.top.CE_API.edit(config);

Where:

• uuid the identifier of the content
• site the site key of the content
• lang the language of the content
• uilang the language of the user interface

You can refer to this link for more details Open Content Editor UI