[MGNLUI-5912] RichTextField - contentsCss in configJsFile not working Created: 02/Jun/20  Updated: 27/Jul/20  Resolved: 19/Jun/20

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: 6.2.1
Fix Version/s: 6.2.2

Type: Bug Priority: Neutral
Reporter: Viet Nguyen Assignee: Federico Grilli
Resolution: Fixed Votes: 0
Labels: ckeditor, maintenance
Remaining Estimate: Not Specified
Time Spent: 1h 59m
Original Estimate: Not Specified

Attachments: PNG File magnolia-5.7.5-ckeditor-iframe.png     PNG File magnolia-5.7.5-console.png     PNG File magnolia-6.2.1-ckeditor-iframe.png     PNG File magnolia-6.2.1-console.png     PNG File magnolia-6.2.1-dialog.png    
Issue Links:
Relates
relates to MGNLUI-5907 RichTextField configuration file erro... Closed
relates to MGNLUI-6087 CKeditor colors, alignment, fonts and... Closed
causality
relation
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
Sprint: Maintenance 11, Maintenance 12
Story Points: 0

 Description   

When using the following configuration for a Rich text field in magnolia 6.2 the "contentCss"
is not used in the head of the ck editor iframe.

However when using the same configuration in magnolia 5.7.5 it is working as expected.

CKEDITOR.editorConfig = function (config) {
    //Toolbar Layout
    var toolbar = [
        {name: "clipboard", items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord"]},
    ];
    config.toolbar = toolbar;
    
//CSS classes
    config.contentsCss = ['https://frontend.live/unionInvestment-website-frontend/develop-v4/resources/css/styles.all.min.css', 'https://frontend.live/unionInvestment-website-frontend/develop-v4/resources/css/styles.all2.min.css'];
};

there are no frontend, nor any backend errors logged.

In Magnolia 6.2.1 I see the following ckeditor in the dialog. This dialog shows that the toolbar configuration is working:

When looking at the html code, the configured resources (contentCss) are missing in the head of the iframe:

Also when using the console to display the CKEditor variables the two entries "
https://frontend.live/unionInvestment-website-frontend/develop-v4/resources/css/styles.all.min.css
https://frontend.live/unionInvestment-website-frontend/develop-v4/resources/css/styles.all2.min.css
are missing:

 

Now when we look at magnolia 5.7.5 we see that it was working in this magnolia version:

You can see that both css files are included in the head within the iframe:

and here the console output of the variable:



 Comments   
Comment by Viet Nguyen [ 09/Jun/20 ]

Customer after investigated the different options I have to implement this:

  1. Overwrite the RichTextFieldFactory class and the MagnoliaCKEditorTextField (since this is the place where the contentCss is actually set.) and set the contentCss in the Editors config within the backend.
    1. PRO: Everything is on one place where it belongs
    2. CONTRA: It equires a lot of copying of existing code, which would result in a more complex magnolia upgrade process, because the existing code would have to be checked against new changes.
  2. Create A REST API Endpoint to get the dynamic values for the contentCss. In the configuration js, I would have to make a call to the REST API.
    1. PRO: Simple Solution
    2. CONTRA: Code is not in one place. Extra RestEndpoint for internal usage

Is there another elegant option to solve this problem?

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