[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: |
|
||||||||||||||||||||
| Issue Links: |
|
||||||||||||||||||||
| 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. 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:
- name: text
fieldType: richText
i18n: true
configJsFile: /.resources/mtk/webresources/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. |