TinyMCE 5.x - 在自定义下拉菜单中突出显示项目答案

【问题标题】：TinyMCE 5.x - Highlight an item in a custom dropdown menuTinyMCE 5.x - 在自定义下拉菜单中突出显示项目
【发布时间】：2019-11-18 17:07:27
【问题描述】：

我在自定义 TinyMCE 5.x 下拉菜单中有 3 个菜单项，用于控制编辑器的宽度。我想指出当前的选择是什么，但在初始化后找不到与菜单项交互的方法。当菜单关闭时，它们似乎根本不在 DOM 中。

如果我的自定义下拉菜单的行为类似于字体大小下拉菜单，我会很高兴，它会在所选大小旁边显示一个复选标记。我也很高兴它就像字体系列下拉菜单一样，其中所选字体显示为菜单切换（不仅仅是在您打开菜单时）。

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

【解决方案1】：

看了一遍，没有发现什么有用的东西，我把它一起破解了，我很不高兴，但它确实有效：

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

    //GET THE SPECIFIC BUTTON IN THAT GROUP (happens to be in slot 4, starts on 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

});

【讨论】：

【解决方案2】：

编辑：我知道这是旧的，但可能对其他人有所帮助。

这可以使用格式和挂钩到每个菜单项的 onSetup 来完成。请参阅下面的工作示例。

editor.ui.registry.addMenuButton('maxWidth', {
  text: 'Width',
  fetch: callback => {
    // Define out 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.
      // See https://www.tiny.cloud/docs/configure/content-formatting/#formats
      editor.formatter.register(option.format, {
        inline: 'span',
        classes: option.format,
      });

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

          // Now toggle the selected one.
          editor.execCommand(
            'FormatBlock',
            false,
            option.format,
          );
        },
        onSetup: function(api) {
          // When generating the item, check if this one is selected.
          if (
            editor.formatter.match(
              option.format,
            )
          ) {
            api.setActive(true);
          }

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

    callback(items);
  },
});

【讨论】：