WordPress TinyMCE的自定义样式

Question

我已经阅读了几篇关于向所见即所得编辑器（TinyMCE）添加自定义样式的教程。但它们似乎都不适用于最新版本的WordPress。我正在使用v3.3.2。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是错误的键。当以我这种方式定义自定义样式时，应该使用style_formats。我怀疑这是一个常见的错误。

- emersonthis

Answer 1

似乎您正在使用这个（很棒的）教程：http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/
对我非常有用，所以我将您的代码与我的进行了比较：看起来您缺少一个。

'wrapper' => true

作为每个子数组的第四个参数。这是为了在您选择的父元素上添加类（它可以扩大您的选择范围），而不是在您的精确选择周围创建一个新元素，然后再向其添加一个类。
因此，如果您选择段落的一部分或2个段落的一部分，它将选择整个段落（关于2个段落的事情不太确定，请测试:)但至少它不会在您的精确选择周围创建内联元素）。

来自文档（上面的链接）：

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

希望这对你有用

- FelipeAls

---

谢谢Felipe。那是我找到的第一个教程之一，但它并不能直接为我所用。我尝试了添加他的代码和安装他的插件，在这两种情况下，当它处于活动状态/取消注释时，我都会得到一个白屏死机。如果您查看下面的评论，似乎我不是唯一一个遇到这个问题的人。您正在运行哪个版本的WordPress？ - emersonthis

我刚刚仔细检查了一遍，即使使用'wrapper'=>true，它仍然无法正常工作。为了安全起见，我回到了（被注释的）版本，该版本将选项定义为字符串，并且它仍然可以工作...（但是在所有内容周围添加了<span>）。这意味着我在数组中声明类的方式肯定有问题。令人沮丧的是，我找不到任何关于这种替代方案的文档。TinyMCE文档（http://www.tinymce.com/wiki.php/Configuration:theme_advanced_styles）几乎不存在，并且根本没有提到这种替代方案。 - emersonthis

我刚刚注意到我们忽略了另一个差异（请参见我的答案）。无论如何，非常感谢您的帮助。 - emersonthis

Answer 2

AHA!

我找到问题所在了：定义自定义类的两个不同版本必须添加到设置数组的不同键中。

这是一个版本...

"Section Head=section-head;Sub Section Head=sub-section-head";

需要成为'theme_advanced_styles'的值。

而这个版本...

$style_formats = array(
array(
    'title' => 'Column',
    'block' => 'div',
    'classes' => 'col',
    'wrapper' => true
    ),
);

在TinyMCE设置数组中，'style_formats'需要是这个值。

我已经更改为第二种样式，但没有注意到数组的不同键。

- emersonthis

---

请问您能提供完整可用的代码吗？我也在尝试让它工作，但是还没有成功。 - INT

使用我在问题中提供的原始代码，但将 'theme_advanced_styles' 替换为 'style_formats'。 - emersonthis

FYI... 对于那些试图让这个工作起来的人 - 它确实可以 - 答案中没有提到的技巧（但问题中有）是，在将 $style_formats 数组分配给 style_formats 设置之前，必须 对其进行 json_encode。 - Ben

Answer 3

WordPress提供了一个函数，用于向编辑器添加自定义样式表: http://codex.wordpress.org/Function_Reference/add_editor_style。

- shrunyan