Conditionaly load plugins based on toolbar options

[nixondesigndev]

Description

Currently, it is possible for a CMS editor to use CKEditor features that perhaps the developer hadn't intended. This is because even if an item isn't present in the toolbar it doesn't mean you can't use that feature and can still use other editor functionality to include certain formatting or content.

For example:

• Even if the toolbar doesn't include the Insert image or Insert media buttons the user can still paste an image from the clipboard or an URL to an image (which CKEditor will then inline)
• If text formatting options aren't included an editor can still use autoformatting to make text bold etc https://ckeditor.com/docs/ckeditor5/latest/features/autoformat.html

I think this is because of the way this plugin loads all of its plugins upfront.

ckeditor/src/web/assets/ckeditor/src/ckeditor.js

Lines 61 to 105 in fcc641b

	plugins: [
	Alignment,
	AutoImage,
	AutoLink,
	Autoformat,
	BlockQuote,
	Bold,
	Code,
	CodeBlock,
	Essentials,
	FindAndReplace,
	GeneralHtmlSupport,
	Heading,
	HorizontalLine,
	HtmlComment,
	HtmlEmbed,
	Image,
	ImageCaption,
	ImageStyle,
	ImageToolbar,
	Indent,
	Italic,
	LinkEditing,
	LinkImage,
	List,
	MediaEmbed,
	MediaEmbedToolbar,
	PageBreak,
	Paragraph,
	PasteFromOffice,
	SelectAll,
	SourceEditing,
	Strikethrough,
	Style,
	Subscript,
	Superscript,
	Table,
	TableCaption,
	TableToolbar,
	TodoList,
	Underline,
	WordCount,
	CraftImageInsertUI,
	CraftLinkUI,
	],

According to the CKEditor docs things like autoformatting will only work if a related plugin is included e.g. the ** autoformatting shortcut for bold will only work if the Bold plugin is loaded.

Would it be possible to conditionally add/remove plugins at runtime based on the toolbar items included?

We can manually remove plugins by passing in a custom config but it would be more intuitive if the available features followed the toolbar.

return {
  removePlugins: [
    'AutoImage',
    'BlockQuote',
    'Code',
    'CodeBlock',
    'Heading',
    'HorizontalLine',
    'MediaEmbed',
    'TodoList',
    'Underline',
  ],
}

Additional info

• Craft version: 4.4
• CKEditor: 3.0

[brandonkelly]

Good call! Just made this change for 3.1 (add2c41) 🎉

[brandonkelly]

3.1.0 is now tagged with that change :)

[nixondesigndev]

Brilliant. Thanks!