将自定义样式格式添加到 TinyMCE（高级自定义字段）答案

【问题标题】：Add custom style formats to TinyMCE (Advanced Custom Fields)将自定义样式格式添加到 TinyMCE（高级自定义字段）
【发布时间】：2018-06-18 22:47:07
【问题描述】：

我为高级自定义字段创建了一个新的 TinyMCE 布局，称为“非常简单”，我想在特定的所见即所得字段上使用它。我已经设法添加了我想要的按钮，我现在正在寻找一种将自定义样式格式列表添加为下拉列表的方法，但我真的不知道如何做到这一点。

我现在的代码如下：

// Customize ACF MCE
add_filter( 'acf/fields/wysiwyg/toolbars' , 'new_toolbars'  );
function new_toolbars( $toolbars )
{
    // - this toolbar has only 1 row of buttons
    $toolbars['Very Simple' ] = array();
    $toolbars['Very Simple' ][1] = array('bold' , 'italic' , 'underline', 'link', 'unlink' );

    $style_formats = array(  
        // These are the custom styles
        array(  
            'title' => 'Red Button',  
            'block' => 'span',  
            'classes' => 'red-button',
            'wrapper' => true,
        ),  
        array(  
            'title' => 'Content Block',  
            'block' => 'span',  
            'classes' => 'content-block',
            'wrapper' => true,
        ),
        array(  
            'title' => 'Highlighter',  
            'block' => 'span',  
            'classes' => 'highlighter',
            'wrapper' => true,
        ),
    );  
    // Insert the array, JSON ENCODED, into 'style_formats'
    $toolbars['Very Simple'][1]['styleselect'] = json_encode( $style_formats );

    // return $toolbars - IMPORTANT!
    return $toolbars;
}

样式格式下拉菜单未显示。任何想法为什么？

【问题讨论】：

标签： php wordpress tinymce advanced-custom-fields

【解决方案1】：

styleselect 下拉菜单默认隐藏，因此要显示任何已注册的格式/样式，您只需在可视化编辑器中激活 styleselect 下拉菜单。

下面的函数（来自WordPress Codex）过滤 TinyMCE 加载的按钮数组，所以只需将其添加到您的functions.php。我正在使用mce_buttons_2 过滤器使其出现在工具栏的第二行。

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

【讨论】：