TinyMCE version 5.x - Stand out with a specific selection in a personalized drop-down navigation bar

Question

TinyMCE version 5.x - Stand out with a specific selection in a personalized drop-down navigation bar

In my customized TinyMCE 5.x dropdown menu, there are 3 options that adjust the width of the editor. I am looking for a way to indicate the currently selected option, but I am unable to interact with the menu items once they are initialized. It seems like the menu items are not present in the DOM when the menu is closed.

I would prefer if my custom dropdown functioned like the font-size dropdown, which shows a check mark next to the selected size. Alternatively, I would be satisfied if it worked similar to the font-family dropdown, where the selected font is displayed as the menu toggle even when the menu is closed.

editor.ui.registry.addMenuButton('maxWidth', {
                        text: 'Width',
                        fetch: function( callback ){
                            var items = [
                                {
                                    type: 'menuitem',
                                    text: 'Full Width',
                                    onAction: function(){   changeSectionWidth("full");     }
                                },
                                {
                                    type: 'menuitem',
                                    text: '1600',
                                    onAction: function(){   changeSectionWidth(1600);   }
                                },
                                {
                                    type: 'menuitem',
                                    text: '1170',
                                    onAction: function(){   changeSectionWidth(1170);   }
                                },
                            ];
                            callback(items);
                        },
                    });

javascript jquery css plugins tinymce-5

Answer 1

Answer №1

Having exhausted all avenues in search of a solution, I resorted to hacking something together, although I must admit I am not overly pleased with this approach. Nonetheless, it does the job:

    //LOCATE THE BUTTON GROUP (located in group 12, index starts at 0)
    let btnGroup = $(editor.editorContainer).find(".tox-toolbar__group")[11];
    if( btnGroup ){
        return false;
    }

    //GET THE SPECIFIC BUTTON IN THAT GROUP (located in slot 4, index starts at 0)
    let targetBTN = $(btnGroup).children()[3];

    //CLICK HANDLER FOR THE SPECIFIC MENUBUTTON
    $(targetBTN).on("click", function(){ 

        //USE A TIMER SO TinyMCE HAS TIME TO RENDER THE MENU
        window.setTimeout( function(){

            //APPLY YOUR OWN LOGIC HERE TO DETERMINE WHICH OPTION TO SELECT
            //this has to match the words in the button and is case-sensitive
            let selectedOption = "Option 2"; 

            //DESELECT OTHER OPTIONS
            //NOTE THAT I AM USING AN EXTRA CLASS "my-selected" WHICH I APPLIED TO THE UI SKIN.min.css BECAUSE HOVER DESELECTED THEIR HIGHLIGHTS AND I WANTED IT MORE PERMANENT
            $(".tox-selected-menu .tox-collection__item--active").removeClass("tox-collection__item--active tox-collection__item--enabled my-selected");

            $('.tox-collection__item[title="'+selectedOption+'"]').addClass("tox-collection__item--active tox-collection__item--enabled my-selected");

        }, 50); //WAIT 50 milliseconds so menu has time to be rendered

});

Answer 2

Having exhausted all avenues in search of a solution, I resorted to hacking something together, although I must admit I am not overly pleased with this approach. Nonetheless, it does the job:

    //LOCATE THE BUTTON GROUP (located in group 12, index starts at 0)
    let btnGroup = $(editor.editorContainer).find(".tox-toolbar__group")[11];
    if( btnGroup ){
        return false;
    }

    //GET THE SPECIFIC BUTTON IN THAT GROUP (located in slot 4, index starts at 0)
    let targetBTN = $(btnGroup).children()[3];

    //CLICK HANDLER FOR THE SPECIFIC MENUBUTTON
    $(targetBTN).on("click", function(){ 

        //USE A TIMER SO TinyMCE HAS TIME TO RENDER THE MENU
        window.setTimeout( function(){

            //APPLY YOUR OWN LOGIC HERE TO DETERMINE WHICH OPTION TO SELECT
            //this has to match the words in the button and is case-sensitive
            let selectedOption = "Option 2"; 

            //DESELECT OTHER OPTIONS
            //NOTE THAT I AM USING AN EXTRA CLASS "my-selected" WHICH I APPLIED TO THE UI SKIN.min.css BECAUSE HOVER DESELECTED THEIR HIGHLIGHTS AND I WANTED IT MORE PERMANENT
            $(".tox-selected-menu .tox-collection__item--active").removeClass("tox-collection__item--active tox-collection__item--enabled my-selected");

            $('.tox-collection__item[title="'+selectedOption+'"]').addClass("tox-collection__item--active tox-collection__item--enabled my-selected");

        }, 50); //WAIT 50 milliseconds so menu has time to be rendered

});

Answer 3

Answer №2

Update: Although this information may be outdated, it could still be beneficial to others.

One way to achieve this is by utilizing formats and leveraging the onSetup function for each menu item. Refer to the following working example:

editor.ui.registry.addMenuButton('maxWidth', {
  text: 'Width',
  fetch: callback => {
    // Define the options for width.
    var widthOptions = [
      {
        title: 'Full width',
        format: 'full_width',
      },
      {
        title: 'Width 2',
        format: 'width2',
      },
      {
        title: 'Width 3',
        format: 'width3',
      },
    ];

    var items = [];

    // Add each option to menu items.
    widthOptions.forEach(option => {
      // Register a custom format for each option.
      editor.formatter.register(option.format, {
        inline: 'span',
        classes: option.format,
      });

      items.push({
        type: 'togglemenuitem',
        text: option.title,
        onAction: action => {
          // Ensure only one option is selected. Deselect all but the clicked one.
          widthOptions.forEach(opt => {
            if (
              option.format !=
              opt.format
            ) {
              tinymce.activeEditor.formatter.remove(
                opt.format,
              );
            }
          });

          // Toggle the selected option.
          editor.execCommand(
            'FormatBlock',
            false,
            option.format,
          );
        },
        onSetup: function(api) {
          // Check if this option is selected when generating the item.
          if (
            editor.formatter.match(
              option.format,
            )
          ) {
            api.setActive(true);
          }

          return function() {};
        },
      });
    });

    callback(items);
  },
});

Answer 4

Update: Although this information may be outdated, it could still be beneficial to others.

One way to achieve this is by utilizing formats and leveraging the onSetup function for each menu item. Refer to the following working example:

editor.ui.registry.addMenuButton('maxWidth', {
  text: 'Width',
  fetch: callback => {
    // Define the options for width.
    var widthOptions = [
      {
        title: 'Full width',
        format: 'full_width',
      },
      {
        title: 'Width 2',
        format: 'width2',
      },
      {
        title: 'Width 3',
        format: 'width3',
      },
    ];

    var items = [];

    // Add each option to menu items.
    widthOptions.forEach(option => {
      // Register a custom format for each option.
      editor.formatter.register(option.format, {
        inline: 'span',
        classes: option.format,
      });

      items.push({
        type: 'togglemenuitem',
        text: option.title,
        onAction: action => {
          // Ensure only one option is selected. Deselect all but the clicked one.
          widthOptions.forEach(opt => {
            if (
              option.format !=
              opt.format
            ) {
              tinymce.activeEditor.formatter.remove(
                opt.format,
              );
            }
          });

          // Toggle the selected option.
          editor.execCommand(
            'FormatBlock',
            false,
            option.format,
          );
        },
        onSetup: function(api) {
          // Check if this option is selected when generating the item.
          if (
            editor.formatter.match(
              option.format,
            )
          ) {
            api.setActive(true);
          }

          return function() {};
        },
      });
    });

    callback(items);
  },
});

TinyMCE version 5.x - Stand out with a specific selection in a personalized drop-down navigation bar

Answer №1

Answer №2

Similar questions

tips for obtaining the highest value among multiple keys within an array

Using multiple Django FBVs to capture and save data with Ajax and jQuery

"Utilize Selenium to navigate and select a menu option with a

Several buttons, each requiring to show distinct text

Tips for assigning a standard or custom value using JavaScript

The $route.reload() function seems to be ineffective in Internet Explorer

Ways to stop the react-router from causing the page to refresh

Using jQuery to extract contact information from Google: A step-by-step guide

Using JavaScript regex to eliminate content enclosed in parentheses, brackets, and Cyrillic characters

AJAX: Displaying the contents of a folder. Issue with URL resolution

Issue with Highcharts: The useHTML flag is not functioning properly when trying to render labels

The presence of an undefined variable in `esm.js` is resulting in an overwhelming amount of

Using NextJS to navigate user journey by mapping an array of values from Formik to

The variable is unable to transfer successfully from JavaScript to PHP using ajax

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces

chart.js version 3 does not display the correct date data on the time axis

Animate owlCarousel slide motion in reverse when using the Prev and Next buttons

Overridden CSS rules

Setting fixed width for table headers in Bootstrap 3

It appears that using Jquery's .on function in combination with AJAX is not functioning as expected