Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-5338

Rich text field does not support configJsFile property completely

    XMLWordPrintable

Details

    • Yes
    • UI Framework 12
    • 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).

      Checklists

        Acceptance criteria

        Attachments

          1. all-options.png
            all-options.png
            116 kB
          2. js-file.png
            js-file.png
            59 kB

          Issue Links

            Activity

              People

                fgrilli Federico Grilli
                rgange Richard Gange
                Votes:
                0 Vote for this issue
                Watchers:
                5 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Checklists

                    Bug DoR
                    Task DoD