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是错误的键。以我正在做的方式定义自定义样式时，它应该是style_formats。我怀疑这是一个常见的错误。

Answer 1

AHA！

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

这个版本...

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

...需要是的值。

而这个版本...

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

...需要成为'style_formats' TinyMCE的设置数组中的值。

我改变了第二种风格，但没有注意到数组的不同键。

Answer 2

看来你使用这个（真棒）教程：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' 
    ) 
); 

希望它为你工作

Answer 3

的Wordpress提供了一个功能添加自定义样式表编辑器：http://codex.wordpress.org/Function_Reference/add_editor_style