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

Question

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

我想要的是一个将所选文本包裹起来的按钮，<span class="someclass"></span>以便我可以根据需要设置其样式。

我该怎么做呢？

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