4

我已经阅读了几篇关于向 WYSIWYG (TinyMCE) 编辑器添加自定义样式的教程。它们似乎都不适用于最新版本的 Wordpress。我正在使用 v3.3.2。来自法典的说明有效，但以有限的方式......

注意：为了 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在以我正在做的方式定义自定义样式时。我怀疑这是一个常见的错误。

4

3 回答 3

2

It seems you're using this (awesome) tutorial: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/
Worked great for me so I compared your code with mine: it seems you lack a

'wrapper' => true

as a fourth parameter to each sub-array. This is needed for adding a class on a parent element of your selection (it can broaden your selection) and not creating a new element around your exact selection before adding it a class.
Thus if you select part of a paragraph or part of 2 paragraphs, it'll select the whole paragraph(s) (not so sure about the 2 paragraphs thing, please test :) but at least it won't create inline element around your exact selection).

From the documentation (above link):

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

My customization:

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

Hope it works for you

于 2012-05-12T20:26:49.667 回答
2

啊哈！

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

这个版本...

"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
    ),
);

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

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

于 2012-05-13T00:48:49.077 回答
-1

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

于 2012-05-21T18:24:38.890 回答