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:
import React from 'react';
export const SampleComponent = () => {
return (
<>
Replace me by any content
</>
);
};
export default SampleComponent;
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>);
}
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
window.jahia.uiExtender.registry.add('action', '3dotsSampleAction', {
targets: ['content-editor/header/3dots:1'],
onClick: context => {
// do something
}
});
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
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
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
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.