Extending Content Editor UI

Add a new tab in content editor

To add a new tab in content editor, you have to add an extension which have the target editHeaderTabsActions. An entry will be added at the sub header of content editor.

To have more information about the actions concept refer to the extension documentation

 

Sample code in React to add a tab to content editor:

Sample component: 

import React from 'react';

export const SampleComponent = () => {
    return (
        <>
            Replace me by any content
        </>
    );
};

export default SampleComponent;

Register the extension:

import React from 'react';
import {Setting} from '@jahia/moonstone/dist/icons';
import SampleComponent from '~/SampleComponent';
import {registry} from '@jahia/ui-extender';

registry.add('action', 'myAction', {
    buttonLabel: 'sample-label',
    buttonIcon: <Setting/>,
    targets: ['editHeaderTabsActions:2'],
    value: 'sample',
    displayableComponent: SampleComponent,
    onClick: context => {
        context.setActiveTab(context.value);
    }
});

targets: Where the extension should be displayed

value: Key of the extension to know the tab to display

displayableComponent: Component which will be displayed once you clicked on the action. The component have to be a React component

A simple displayableComponent can be declared as the following:

displayableComponent: () => {
    return (<div>A simple component</div>);
}

 Add a menu entry to the 3 dots menu in header

To add a menu entry to the 3 dots menu of content editor, add an extension to the content-editor/header/3dots target.

Sample code that register the extension using the window.jahia.uiExtender

Sample: 

window.jahia.uiExtender.registry.add('action', '3dotsSampleAction', {
    targets: ['content-editor/header/3dots:1'],
    onClick: context => {
        // do something
    }
});

 

 Add a menu entry to the 3 dots menu for every field

To add a menu entry to the 3 dots menu of every field, add an extension to the content-editor/field/3dots target. The action will receive the following props in context : formik, editorContext, field

Sample code registering an extension as React component : https://github.com/Jahia/copy-to-other-languages 

List of registries in content editor

You can add extensions to content editor by using the following keys in the target option of your custom extensions. According to the key you specified, the extension will be displayed in a specific area of content editor.

1: editHeaderTabsActions: Contains the header tabs actions

2: content-editor/header/3dots: Contains the 3 dots menu actions in header

3: content-editor/header/main-save-actions: Contains the save button

4: content-editor/header/main-publish-actions: Contains the publish button

5: content-editor/field/3dots: Contains the 3 dots menu actions displayed after the field name

6: publishMenu: Contains the actions in the menu next to the publish button

 

Open content editor from another context:

Open from an URL:

To open content editor in the edit mode:

{domain}/{context}/jahia/content-editor/{language}/edit/{uuid}

Example:

http://mySite.com/sampleContext/jahia/content-editor/en/edit/627e7672-fc37-4b25-bfea-1ccb1767f0fe

 

To open content editor in the create mode:

{domain}/{context}/jahia/content-editor/{language}/create/{parentUuid}/{nodeType}

Example:

http://mySite.com/sampleContext/jahia/content-editor/en/create/6e85d4f9-7d98-4045-aad7-c4abca9c6664/jnt:text

domain: Domain of your site

context: Context of of application

language: node langague to edit or create

uuid: Identifier of the node you want to edit (edit mode)

parentUuid: Identifier of the parent node where you want to create a node (create mode)

nodeType: Node type of the node you want to create

 

Open from a custom module:

From any javascript code you can open content editor by using the following call:

Content editor will be opened in a modal.

In edit mode: window.CE_API.edit(uuid, siteName, language, uiLanguage);

Example:

 window.CE_API.edit('9efc7e68-2efc-4091-a16c-0fc3125bf077','digitall','en','en');

uuid: Identifier of the node you want to edit

siteName: Site where the node is present

language: the node language you want to edit

uiLanguage: language of the UI

 

In create mode: window.CE_API.create(uuid, path, site, lang, uilang, nodeTypes);

Example:

window.CE_API.create('9efc7e68-2efc-4091-a16c-0fc3125bf077','digitall','en','en', ['jnt:text']);

uuid: uuid of the parent node path where the content will be created

path: path of the parent node path where the content will be created

site: The current site

lang: The node language

uilang: The preferred user lang for ui

nodeTypes: Array of one element containaing the node type (example: ['jnt:text']). In case there are multiple types, or the type provided has several subtypes, the Content Type selector will be shown to let the user select the type he wants to create.