当您在方法上有编辑器时，TinyMCE 更新工具栏（初始化后）答案

【问题标题】：TinyMCE update Toolbar (after init) when you have Editor on method当您在方法上有编辑器时，TinyMCE 更新工具栏（初始化后）
【发布时间】：2018-07-02 20:50:05
【问题描述】：

我正在为 WordPress 开发 Google Fonts 插件，并尝试获得与核心 WYSIWYG 编辑器相同的效果。基本上，当您单击带有字体类的元素（在编辑器内）时，我想获取该类，然后基于该类重新加载工具栏中的字体系列/样式列表框。

（我在 SO 上发现了一些类似 Proper Way Of Modifying Toolbar After Init in TinyMCE 的 hack，但没有什么像 WP 核心示例那样有效）

点击P，H1，H3，H3时有相同的功能......他们是怎么做到的？你能至少指出我在 WordPress 发行版中的 JS 文件吗？我想我看代码就知道了。

这里是演示我在说什么的 GIF。提前致谢。

【问题讨论】：

标签： javascript wordpress tinymce

【解决方案1】：

我找到了解决方案，因为它不是一个 hack，就像我在 SO 上找到的其他解决方案一样，我将它发布在这里，希望它可以帮助其他尝试做类似事情的人。

首先要访问按钮/列表框需要使用带有回调函数的onpostrender。

editor.addButton( 'developry_google_font_family_button', {
   type  : 'listbox',
   onpostrender : fontFamilyNodeChange,
   value : '',
...

接下来的回调函数应该如下所示：

function fontFamilyNodeChange() {
    var listbox = this;
    editor.on('NodeChange', function( e ) {
        // This next part is specific for my needs but I will post it as an example.
        var selected = [];
        if ( $( e.element ).hasClass( 'mce-ga' ) )  { // this a class I add to all elements that have google fonts format
            // Then I strip the classes from classList that I don't need and add the rest into an array (e.g ['roboto', '100'])
            var gfont_options = $( e.element ).attr('class')
                .replace('mce-ga', '')
                    .replace('mce-family-', '')
                        .replace('mce-weight-', '')
                            .trim()
                                .split(' ');
            selected.push( gfont_options );
            // At end I add the new value to listbox select[0][0] (e.g. 'roboto')
            listbox.value(selected[0][0]);
        }
    });
}

这是一个例子：

【讨论】：

如果你想向fontFamilyNodeChange 传递一个额外的参数，我必须弄清楚一件事，代码需要更改如下。 onpostrender : function() { fontFamilyNodeChange( this, 'option' ) }