我可以将自定义格式添加到文本面板中的格式选项中吗?

时间:2010-11-10 作者:Mild Fuzz

在文本编辑器中,您可以设置标题和其他设置,是否可以添加您自己的样式供客户端使用?甚至去掉不必要的?

3 个回复
最合适的回答,由SO网友:Jan Fabry 整理而成

“classic”TinyMCE编辑器有两个下拉菜单:formatselect 对于段落样式和styleselect 对于字符样式,也可以包含段落样式,以使其更加混乱。默认情况下,WordPress中的配置仅显示格式下拉列表。如果将自定义样式表应用于编辑器,TinyMCE可以使用它来提取类名并将它们添加到样式下拉列表中,但这并不是每次都适用于我。

从3.0开始,您可以拨打add_editor_style() 在您的functions.php 将样式表添加到编辑器。默认情况下editor-style.css 在主题目录中。在3.0之前,您必须mce_css 筛选以将URL添加到编辑器样式表。这将在the content_css TinyMCE configuration value.

要添加样式下拉列表styleselect 选项必须出现在其中一个按钮栏配置阵列中(theme_advanced_buttons[1-4] 在TinyMCE中,按过滤mce_buttons_[1-4] 在WordPress中)。块格式列表由the theme_advanced_blockformats option of TinyMCE, 可以将其添加到tiny_mce_before_init 滤器如果要自定义样式下拉列表的名称(不仅仅是CSS类名),请查看the theme_advanced_styles option. 您还可以使用更高级的style_formats option 这使您可以更灵活地定义样式。

包含所有挂钩和默认配置的相关PHP代码位于wp-admin/includes/post.php, in function wp_tiny_mce(). 总之,您的设置可能如下所示:

add_action( \'after_setup_theme\', \'wpse3882_after_setup_theme\' );
function wpse3882_after_setup_theme()
{
    add_editor_style();
}

add_filter(\'mce_buttons_2\', \'wpse3882_mce_buttons_2\');
function wpse3882_mce_buttons_2($buttons)
{
    array_unshift($buttons, \'styleselect\');
    return $buttons;
}

add_filter(\'tiny_mce_before_init\', \'wpse3882_tiny_mce_before_init\');
function wpse3882_tiny_mce_before_init($settings)
{
    $settings[\'theme_advanced_blockformats\'] = \'p,h1,h2,h3,h4\';

    // From http://tinymce.moxiecode.com/examples/example_24.php
    $style_formats = array(
        array(\'title\' => \'Bold text\', \'inline\' => \'b\'),
        array(\'title\' => \'Red text\', \'inline\' => \'span\', \'styles\' => array(\'color\' => \'#ff0000\')),
        array(\'title\' => \'Red header\', \'block\' => \'h1\', \'styles\' => array(\'color\' => \'#ff0000\')),
        array(\'title\' => \'Example 1\', \'inline\' => \'span\', \'classes\' => \'example1\'),
        array(\'title\' => \'Example 2\', \'inline\' => \'span\', \'classes\' => \'example2\'),
        array(\'title\' => \'Table styles\'),
        array(\'title\' => \'Table row 1\', \'selector\' => \'tr\', \'classes\' => \'tablerow1\'),
    );
    // Before 3.1 you needed a special trick to send this array to the configuration.
    // See this post history for previous versions.
    $settings[\'style_formats\'] = json_encode( $style_formats );

    return $settings;
}

SO网友:Vasyl

您可以通过以下方式添加自定义格式或删除现有格式:

add_filter(\'tiny_mce_before_init\', function($init_array) {
    $init_array[\'formats\'] = json_encode([
        // add new format to formats
        \'h3marked\' => [
            \'selector\' => \'h3\',
            \'block\'    => \'h3\',
            \'classes\'  => \'article-paragraph\',
        ],
    ], JSON_THROW_ON_ERROR);

    // remove from that array not needed formats
    $block_formats = [
        \'Paragraph=p\',
        \'Heading 1=h1\',
        \'Heading 2=h2\',
        \'Heading 3=h3\',
        \'Heading 3 marked=h3marked\',    // use the new format in select
        \'Heading 4=h4\',
        \'Heading 5=h5\',
        \'Heading 6=h6\',
        \'Preformatted=pre\',
    ];
    $init_array[\'block_formats\'] = implode(\';\', $block_formats);

    return $init_array;
});
在中查看更多信息this post 还有这个tinymce docs

SO网友:user2136473

根据此处TinyMCE format dropdown no longer showing style previews

Kara说得对,你需要取消设置默认样式才能看到新样式。。。

unset($init[\'preview_styles\']);

return $settings;

结束

相关推荐

ADD_META_BOX中的“Advanced”$CONTEXT是什么?

在codex中,它列出了add\\u meta\\u框的参数$context,具有以下选项:“高级”的作用是什么?我看不出它和“正常”有什么区别。