[MGNLUI-5338] Rich text field does not support configJsFile property completely Created: 22/Aug/19  Updated: 14/Jul/20  Resolved: 09/Dec/19

Status: Closed
Project: Magnolia UI
Component/s: dialogs, forms
Affects Version/s: 6.1.1
Fix Version/s: 6.1.4, 6.2

Type: Bug Priority: Neutral
Reporter: Richard Gange Assignee: Federico Grilli
Resolution: Fixed Votes: 0
Labels: RichTextField, ckeditor
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File all-options.png     PNG File js-file.png    
Issue Links:
duplicate
is duplicated by MGNLUI-5418 RichTextField with custom JS does not... Closed
is duplicated by MGNLUI-5515 CLONE - RichTextField with custom JS ... Closed
relation
is related to MGNLUI-5564 CKEditor Config File Changes Do Not G... Open
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Release notes required:
Yes
Date of First Response:
Epic Link: Support
Sprint: UI Framework 12
Story Points: 3

 Description   

Timebox for investigation: 3 SP

If you try and configure a custom js file which creates a drop down menu there is no menu visible in the UI.

For example I create a file:

Here is the file where I add config.stylesSet:

/**
 * External plugins added through the server-side FieldFactory are automatically registered.
 * Other external plugins (e.g. client-only) may still be registered here (and subsequently added via config.extraPlugins).
 *
 * e.g. if your plugin resides in src/main/resources/VAADIN/js:
 * CKEDITOR.plugins.addExternal("abbr", CKEDITOR.vaadinDirUrl + "js/abbr/");
 */


CKEDITOR.editorConfig = function( config ) {

	// MIRROR info.magnolia.ui.form.field.definition.RichTextFieldDefinition
	definition = {
		alignment: true,
		images: true,
		lists: true,
		source: true,
		tables: true,
		colors: null,
		fonts: null,
		fontSizes: null
	}

	// MIRROR info.magnolia.ui.form.field.factory.RichTextFieldFactory
	removePlugins = [];

	// CONFIGURATION FROM DEFINITION
	if (!definition.alignment) {
		removePlugins.push("justify");
	}
	if (!definition.images) {
		removePlugins.push("image");
	}
	if (!definition.lists) {
		// In CKEditor 4.1.1 enterkey depends on indent which itself depends on list
		removePlugins.push("enterkey");
		removePlugins.push("indent");
		removePlugins.push("list");
	}
	if (!definition.source) {
		removePlugins.push("sourcearea");
	}
	if (!definition.tables) {
		removePlugins.push("table");
		removePlugins.push("tabletools");
	}

	if (definition.colors != null) {
		config.colorButton_colors = definition.colors;
		config.colorButton_enableMore = false;
		removePlugins.push("colordialog");
	} else {
		removePlugins.push("colorbutton");
		removePlugins.push("colordialog");
	}
	if (definition.fonts != null) {
		config.font_names = definition.fonts;
	} else {
		config.removeButtons = "Font";
	}
	if (definition.fontSizes != null) {
		config.fontSize_sizes = definition.fontSizes;
	} else {
		config.removeButtons = "FontSize";
	}
	if (definition.fonts == null && definition.fontSizes == null) {
		removePlugins.push("font");
		removePlugins.push("fontSize");
	}

	// DEFAULT CONFIGURATION FROM FIELD FACTORY
	removePlugins.push("elementspath");
	removePlugins.push("filebrowser");
	config.removePlugins = removePlugins.join(",");
	config.extraPlugins = "magnolialink,magnoliaFileBrowser";

	config.baseFloatZIndex = 150;
	config.resize_enabled = true;
	config.toolbar = "Magnolia";

   config.stylesSet = [
     // Block-level styles
	   { name: 'Blue Title2', element: 'h2', styles: { 'color': 'Blue' } },
	   { name: 'Blue Title3', element: 'h2', styles: { 'color': 'Blue' } },
	   { name: 'Blue Title4', element: 'h2', styles: { 'color': 'Blue' } },
           { name: 'Blue Title5', element: 'h2', styles: { 'color': 'Blue' } },
           { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
           { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
	  { name: 'Red Title P' , element: 'p', styles: { 'color': 'Red' } },

     // Inline styles
     { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
     { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
 ];

	config.toolbar_Magnolia = [
		{ name: "basicstyles",   items: [ "Bold", "Italic", "Underline", "SpecialChar" ] },
		{ name: "paragraph",     items: [ "NumberedList", "BulletedList", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "Image", "Table" ] },		
		{ name: "links",         items: [ "Link", "InternalLink", "DamLink", "Unlink" ] },
                { name: "undo",          items: [ "Undo", "Redo" ] },
                { name: "styles",        items: [ "Styles" ] },
                { name: "clipboard",     items: [ "Cut", "Copy", "Paste", "PasteText", "PasteFromWord" ] },
                { name: "tools",         items: [ "Source" ] }
	];
};


The button shows if the file is properly configured on the RichText field but when you try to use it nothing shows up. (See the attached support ticket).



 Comments   
Comment by Richard Gange [ 20/Nov/19 ]

In version 6.1.3 it seems you can turn everything on by referring to a config file. Just by setting the configJsFile property. The configurations of the file have no effect but it does allow the ckeditor to show all options.

From the mtk textImage dialog /mtk/dialogs/components/textImage.yaml:
Change the text field to be:

- name: text
  fieldType: richText
  i18n: true
  configJsFile: /.resources/mtk/webresources/js/config-magnolia.js

config-magnolia.js

Then the effect is all options:

Comment by Richard Gange [ 21/Nov/19 ]

So after trying to figure this out I have found there is inconsistent behavior. In some cases it seems to pick up some settings from the config file. For example, I can turn on-and-off the source button. However, I do need restart for the changes to be loaded in the browser.

In some cases, it seems to ignore the file altogether and fallback to the all-on scenario.

I have not been able to find a way to customize the drop down as described above. That feature seems to be totally broken.

Comment by Federico Grilli [ 04/Dec/19 ]

As far as I could see, the behaviour you experienced above with all options on, happens when one sets configJsFile to a wrong path/non existing file. In that case, apparently, the underlying Vaadin add-on defaults to a toolbar with all options available.

Generated at Mon Feb 12 09:25:32 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.