wordpress - Wordpress TinyMCE 的自定义样式

Question

我已经阅读了一些有关向 WYSIWYG (TinyMCE) 编辑器添加自定义样式的教程。它们似乎都不适用于最新版本的 WordPress。我正在使用 v3.3.2。 instructions from the codex工作，但方式有限......

注意:为了 100% 清楚，我正在尝试添加一个“样式”下拉列表，作者可以使用它来将我的自定义样式应用到文本。 (请不要将我的问题与如何使用 editor-style.css 设置编辑器自身的样式混淆...)

我设法使代码正常工作，但仅使用 my_mce_before_init() 中的注释行。此版本的问题在于它添加了带有通用 <span> 的类。 。我正在尝试使用更强大的代码版本(如下所示)，但有些事情不太正确。样式下拉框出现，但它是空白的。如果我单击它，第一个项目会显示“样式”，但什么也不做。我怀疑我的阵列有问题。希望比我更有知识的人可以纠正我。

这是我主题的functions.php中的相关代码...

这是我添加按钮的方法:

// Add the Style selectbox to the second row of MCE buttons
function my_mce_buttons_2($buttons)
{
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

这是我添加样式的方法(当我取消注释时它会起作用):

//Define the actual styles that will be in the box
function my_mce_before_init($init_array)
{
    // add classes using a ; separated values
    //$init_array['theme_advanced_styles'] = "Section Head=section-head;Sub Section Head=sub-section-head";

    $temp_array['theme_advanced_styles'] = array(
        array(
            'title' => 'Section Head',
            'block' => 'h3',
            'classes' => 'section-head'
        ),
        array(
            'title' => 'Sub Section Head',
            'block' => 'h4',
            'classes' => 'sub-section-head'
        )       
    );

    $styles_array = json_encode( $temp_array['theme_advanced_styles'] );

            //  THIS IS THE PROBLEM !!!! READ BELOW
    $init_array['theme_advanced_styles'] = $styles_array;

    return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

更新:我想通了(请参阅下面的答案)。在向下滚动之前，请注意上面的代码，theme_advanced_styles是错误的 key 。应该是style_formats当以我正在做的方式定义自定义样式时。我怀疑这是一个常见的错误。

Answer 1

看来您正在使用这个(很棒的)教程:http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/
对我来说效果很好，所以我将你的代码与我的代码进行了比较:看来你缺少一个

'wrapper' => true

作为每个子数组的第四个参数。这是在您的选择的父元素上添加类(它可以扩大您的选择)所必需的，并且在添加类之前不围绕您的确切选择创建新元素。
因此，如果您选择一个段落的一部分或两个段落的一部分，它会选择整个段落(不太确定这两个段落的事情，请测试:)但至少它不会在您的周围创建内联元素精确选择)。

来自文档(上面的链接):

wrapper [optional, default = false]
  if set to true, creates a new block-level element
  around any selected block-level elements

我的定制:

$style_formats = array(
    array(
        'title' => 'Column',
        'block' => 'div',
        'classes' => 'col',
        'wrapper' => true
    ),
    array(
        'title' => 'Some div with a class',
        'block' => 'div',
        'classes' => 'some_class',
        'wrapper' => true
    ),
    array(
        'title' => 'Title with other CSS',
        'selector' => 'h3',
        'classes' => 'other_style'
    ),
    array(
        'title' => 'Read more link',
        'selector' => 'a',
        'classes' => 'more'
    )
);

希望它对你有用