在高级自定义字段中将自定义样式按钮添加到所见即所得答案

【问题标题】：Add custom style button to wysiwyg in Advanced custom fields在高级自定义字段中将自定义样式按钮添加到所见即所得
【发布时间】：2015-12-03 04:11:50
【问题描述】：

我想在高级自定义字段的所见即所得编辑器中添加一个自定义按钮。我还没有找到任何关于如何做到这一点的好的解决方案。

我想要的是一个将所选文本包装在<span class="someclass"></span> 中的按钮，以便我可以随意设置它的样式。

我该怎么做？

【问题讨论】：

stackoverflow.com/questions/18839252/…的可能重复
您确定没有使用 acf 的任何简化方法吗？
刚刚检查了 ACF wysiwyg 似乎您可以在 acf wysiwyg 工具栏上使用过滤器。见advancedcustomfields.com/resources/…
虽然这是针对已经存在的按钮。我认为您需要按照我发送的第一个链接中的说明创建按钮，然后使用第二个链接的方法将其添加到 ACF 中。

标签： wordpress advanced-custom-fields

【解决方案1】：

您需要做的是绑定到您的 TinyMCE 编辑器按钮。这将为您的班级的所见即所得编辑器添加一个格式下拉列表。然后，您可以选择文本并从下拉列表中选择类。使用文本视图检查它是否有效。

/*
 * Callback function to filter the MCE settings
 */

// 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');

function my_mce_before_init_insert_formats($init_array) {
// Define the style_formats array
    $style_formats = array(
        // Each array child is a format with it's own settings
        array(
            'title' => 'Some Class',
            'inline' => 'span',
            'classes' => 'someclass'
        ),
    );
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode($style_formats);
    return $init_array;
}

// Attach callback to 'tiny_mce_before_init' 
add_filter('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

【讨论】：