When should I use the Editor Config Contributor client extension type?

• You need custom toolbar buttons, plugins, or content filters in editors. • You want editor configs to differ per portlet (only comments, only web-content, etc.).

How do I create a Editor Config Contributor client extension?

1. Export a default function that receives + returns a config object. 2. Optionally scope the override via `editorConfigKeys`, `editorNames`, or `portletNames`.

What fields are required on a Editor Config Contributor client extension?

url (string): Path to the JS module implementing the contributor.

Editor Config Contributor

Extend the configuration of Liferay's rich-text editors.

type: editorConfigContributor·Frontend·Liferay docs →

# description

Adds JavaScript that mutates the CKEditor / AlloyEditor configuration object before the editor initializes.

UI extensions that render on Liferay pages or modify page appearance.

# when to use

→You need custom toolbar buttons, plugins, or content filters in editors.
→You want editor configs to differ per portlet (only comments, only web-content, etc.).

# how to use

01Export a default function that receives + returns a config object.
02Optionally scope the override via editorConfigKeys, editorNames, or portletNames.

# required fields

field	type	description
`url`required	`string`	Path to the JS module implementing the contributor.

# optional fields

field	type	description
`name`	`string`	Display name.
`editorConfigKeys`	`string[]`	Editor configuration keys this contributor overrides; omit = all.
`editorNames`	`string[]`	Restrict to specific editors.
`portletNames`	`string[]`	Restrict to editors inside specific portlets.

# example

client-extension.yaml

my-editor-config:
    type: editorConfigContributor
    name: Custom Toolbar
    url: editor-config.js
    portletNames:
        - com_liferay_journal_web_portlet_JournalPortlet

# more in frontend

cd ..scaffold this type in VS Code →