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

Question

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

如果我的自定义下拉菜单的行为类似于font-size下拉菜单，该字体会在所选大小旁边显示一个对号，我会很高兴。我也对它感到满意，就像字体系列下拉菜单一样，其中所选字体显示为菜单切换按钮（不仅仅是打开菜单时）。

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);
                        },
                    });

Answer 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

});