javascript - TinyMCE 5.x - 突出显示自定义下拉菜单中的元素

Question

我在自定义 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);
                        },
                    });

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

});