Wordpress TinyMCE的自定义样式

时间:2012-05-12 18:26:37

标签: wordpress tinymce wordpress-theming

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

注意:要100%清除,我正在尝试添加“样式”下拉列表,作者可以使用该下拉列表将自定义样式应用于文本。 (请不要混淆我的问题以及如何使用editor-style.css来编辑自己的编辑器。)

我设法让代码正常工作,但只使用my_mce_before_init()中的注释掉的行。此版本的问题在于它为类添加了通用<span>。我正在尝试使用更强大的代码版本(如下所示),但有些东西并不完全正确。出现样式下拉框,但它是空白的。如果我点击它,第一个项目是“样式”,但什么都不做。我怀疑我的阵列有些不对劲。希望比我更有知识的人可以让我直截了当。

这是我主题的函数中的相关代码.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。我怀疑这是一个常见的错误。

3 个答案:

答案 0 :(得分: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'
    )
);

希望它适合你

答案 1 :(得分: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'的值。

我已经改为第二种风格,但没有注意到数组的不同键。

答案 2 :(得分:-1)

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