Extending Content Editor UI

  Written by The Jahia Team
   Estimated reading time:

Add a new tab in content editor

To add a new tab in content editor, you have to add an action 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 action 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 action:

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 action should be displayed

value: Key of the action 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 an action to the 3 dots menu

To add an action to the 3 dots menu of content editor add an action to the content-editor/header/3dots target.

Sample: 

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

 

List of registries in content editor:

Content-editor actions .png

You can add actions to content editor by using the following keys in the target option of your custom action. According to the key you specified, the action 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

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

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

5: 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.