Using Content Editor from a custom UI

Content Editor 3.x

Edit

• 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

Example:

Edit current site node in english

window.CE_API.edit(window.jahiaGWTParameters.siteUuid, window.jahiaGWTParameters.siteKey, 'en', 'en')

Create

window.CE_API.create(uuid, path, site, lang, uilang, nodeTypes, excludedNodeTypes, includeSubTypes, name)

• uuid: Parent uuid of the content to create, this is used by content editor to save the content
• path: parent path of the content to create, this is used by the type selector, to get the restrictions regarding the location of content to create. 
• 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.
• excludedNodeTypes: Types to exclude from the allowed types to create.
• includeSubTypes: if false, inherited types from nodetypes provided won't be added as types that can be created. For example, if nodetypes parameter is ['jnt:text'], a type jnt:myCustomText extends jnt:text, by default a content type selector with the two types is displayed. If includeSubTypes is false, inherited types won't be resolved then content editor will be open directly to create a new text content.   
• name: Name to use for the new content. 

Examples:

Create a new text under the site node:

window.CE_API.create(window.jahiaGWTParameters.siteUuid, '/sites/'+ window.jahiaGWTParameters.siteKey, window.jahiaGWTParameters.siteKey, 'en', 'en', ['jnt:text'])

Create a new content (but not text) under the site node with a specific name:

window.CE_API.create(window.jahiaGWTParameters.siteUuid, '/sites/'+ window.jahiaGWTParameters.siteKey, window.jahiaGWTParameters.siteKey, 'en', 'en', ['jnt:content'], ['jnt:text'], true, 'test content')

Content Editor 4.x

One of the changes with Content Editor 4 API is that now an object is used as a parameter instead of many parameters.
Some new functionalities has been introduced. 
Note that the Content Editor 3.x format is still working.

Edit

Available properties:

• uuid: Identifier of the node you want to edit
• site: Site where the node is present
• lang: the node language you want to edit
• uilang: language of the UI
• isFullscreen: if true, content editor is displayed in full screen
• editCallback: function called after a content is edited, it has an info parameter that contains: {originalNode, updatedNode}
• onClosedCallback: function called when content editor is close

Examples:

Set an object config to edit the current site node with the UI in french:

const CE_CONFIG={uuid: window.jahiaGWTParameters.siteUuid,
               site: window.jahiaGWTParameters.siteKey,
               lang: 'en',
               uilang: 'fr'};
console.log('open Content Editor');
window.CE_API.edit(CE_CONFIG);

Update the object config to edit the current site node in fullscreen, UI in french, and display a log message when the content is saved. 

CE_CONFIG.isFullscreen = true;
CE_CONFIG.editCallback = (...data) => console.log(`content saved`, data);
console.log('open Content Editor');
window.CE_API.edit(CE_CONFIG);

Create

Available properties:

• uuid: Identifier of the node you want to edit
• path: Parent path of the content to create, this is used by the type selector, to get the restrictions regarding the location of the content to create. 
• site: Site where the node is present
• lang: The node language you want to edit
• uilang: Language of the 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.
• excludedNodeTypes: Types to exclude from the allowed types to create.
• includeSubTypes: if false, inherited types from nodetypes provided won't be added as types that can be created. For example, if nodetypes parameter is ['jnt:text'], a type jnt:myCustomText extends jnt:text, by default a content type selector with the two types is displayed. If includeSubTypes is false, inherited types won't be resolved then content editor will be open directly to create a new text content.   
• isFullscreen: If true, content editor is displayed in full screen
• createCallback: Function called after a content is edited, it has an info parameter that contains: {newNode}
• onClosedCallback: function called when content editor is close
• name: Name to use for the new content. 

Examples

Create a new page (jnt:page) or non internationalized page (jnt:noni18npage) under site node using a config object:

const CE_CREATE_CONFIG = {uuid: window.jahiaGWTParameters.siteUuid,
                          path: '/sites/' + window.jahiaGWTParameters.siteKey,
               site: window.jahiaGWTParameters.siteKey,
               lang: 'en',
               uilang: 'en',
               nodeTypes: ['jnt:page']
};
window.CE_API.create(CE_CREATE_CONFIG);

Update the CE config to open page only:

CE_CREATE_CONFIG.includeSubTypes = false;
window.CE_API.create(CE_CREATE_CONFIG);

Update the CE config to set a specific name for the content:

CE_CREATE_CONFIG.name = 'my-page';
window.CE_API.create(CE_CREATE_CONFIG);

jContent 3.x

One of the changes with jContent 3 API is that now the windows.parent object is used instead of windows object to ease the API usage whether it is used in a template or in a button.
Some new functionalities has been introduced. 
Note that the Content Editor 4.x format is still working. (???)

Edit

Available properties:

• uuid (or path): Identifier (or Path) of the node you want to edit
• lang: the node language you want to edit (not mandatory, it will use the current language if it's not passed)
• isFullscreen: if true, content editor is displayed in full screen
• editCallback: function called after a content is edited, it has an info parameter that contains: {originalNode, updatedNode}
• onClosedCallback: function called when content editor is close
• onExited: function called after content editor is close

The edit API can be called with:

<input type="button" onClick="window.parent.CE_API.edit({path:'/sites/digitall/home/area-main'})">edit</input>

Examples:

Set an object config to edit the current site node with the UI in french:

const CE_CONFIG={uuid: window.jahiaGWTParameters.siteUuid,
               site: window.jahiaGWTParameters.siteKey,
               lang: 'en',
               uilang: 'fr'};
console.log('open Content Editor');
window.parent.CE_API.edit(CE_CONFIG);

Update the object config to edit the current site node in fullscreen, UI in french, and display a log message when the content is saved. 

CE_CONFIG.isFullscreen = true;
CE_CONFIG.editCallback = (...data) => console.log(`content saved`, data);
console.log('open Content Editor');
window.parent.CE_API.edit(CE_CONFIG);

Create

Available properties:

• uuid (or path): Identifier (or Path) of the node you want to create
• lang: The node language you want to create (not mandatory, it will use the current language if it's not passed)
• 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.
• excludedNodeTypes: Types to exclude from the allowed types to create.
• includeSubTypes: if false, inherited types from nodetypes provided won't be added as types that can be created. For example, if nodetypes parameter is ['jnt:text'], a type jnt:myCustomText extends jnt:text, by default a content type selector with the two types is displayed. If includeSubTypes is false, inherited types won't be resolved then content editor will be open directly to create a new text content.   
• isFullscreen: If true, content editor is displayed in full screen
• createCallback: Function called after a content is edited, it has an info parameter that contains: {newNode}
• onClosedCallback: function called when content editor is close
• onExited: function called after content editor is close
• name: Name to use for the new content
• orderBefore: specify where the node will be added
• layout: use a completely custom layout
• dialogProps: props to add to the dialog
• useConfirmationDialog: true/false, allows to close without confirmation

The create API can be called with:

<input type="button" onClick="window.parent.CE_API.create({path:'/sites/digitall/home/area-main'})">create</input>

Examples

Create a new page (jnt:page) or non internationalized page (jnt:noni18npage) under site node using a config object:

const CE_CREATE_CONFIG = {uuid: window.jahiaGWTParameters.siteUuid,
                          path: '/sites/' + window.jahiaGWTParameters.siteKey,
               site: window.jahiaGWTParameters.siteKey,
               lang: 'en',
               uilang: 'en',
               nodeTypes: ['jnt:page']
};
window.parent.CE_API.create(CE_CREATE_CONFIG);

Update the CE config to open page only:

CE_CREATE_CONFIG.includeSubTypes = false;
window.parent.CE_API.create(CE_CREATE_CONFIG);

Update the CE config to set a specific name for the content:

CE_CREATE_CONFIG.name = 'my-page';
window.parent.CE_API.create(CE_CREATE_CONFIG);

Store shared config in the registry

Note that it's possible (and preferable for complex params like callbacks) to move all these configuration parameters in a dedicated configuration, stored in the registry. For example :

    window.jahia.uiExtender.registry.add('content-editor-config', 'my-config', {
        createCallback: ({path}) => {
            window.jahia.reduxStore.dispatch({type: 'CM_OPEN_PATHS', payload: [path.substring(0, path.lastIndexOf('/'))]});  
            window.jahia.reduxStore.dispatch(window.jahia.uiExtender.registry.get('redux-action', 'jcontentGoto').action({path}));
        }
    });

and then use it with the configName parameter :

    window.parent.CE_API.create({path:'/sites/digitall/home', nodeTypes:['jnt:page'], includeSubTypes:false, configName:'my-config'})

Any parameter (except the one related to nodetype selector, like nodeTypes and includeSubTypes), can be put in a shared config like that.

2 - Open Content Editor using an URL

Use case:

To share a link that will open a content in creation in editor

URL Format

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