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

Rich text field does not support configJsFile property completely

    XMLWordPrintable

    Details

    • Release notes required:
      Yes
    • Epic Link:
    • Sprint:
      UI Framework 12
    • Story Points:
      3
    • Magnolia Release:
      6.1.4, 6.2

      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).

        Attachments

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

          Issue Links

            Activity

              People

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

                Dates

                Created:
                Updated:
                Resolved:
                Date of First Response: