如何在TinyMCE中使用自定义文本样式编辑实际的段落下拉菜单

时间:2017-11-16 作者:kater louis

我想给后端用户只有4种文本样式可供选择。标题、副标题、段落和我们称之为.statement.

搜索诸如“TinyMCE中的自定义样式”之类的术语总是以wordpress本身的这篇文章结尾。https://codex.wordpress.org/TinyMCE_Custom_Styles

enter image description here

不幸的是,我不想访问其他下拉列表。我需要去掉当前下拉列表中的内容,并用我自己的样式填充它。

在第一步中,我实际上并不关心它们在下拉菜单和可视化编辑器中的外观。这里的关键是去掉不必要的造型选项;选项设计(&P);前端将不支持。(尽管可以改变编辑器内部的外观)

function my_mce_before_init_insert_formats( $init_array ) {

我看了看$init_array 找不到正在创建下拉列表的位置。

非常感谢您的建议:)

路易斯!

2 个回复
最合适的回答,由SO网友:Vlad K. 整理而成

我也有同样的问题,下面是你能做的。下面的代码禁用块格式部分中的h1标记。同样,您可以禁用其他标记,也可以添加自己的标记。但我不确定如何为它们添加自定义CSS样式。希望这段代码能提示您以何种方式进行挖掘。

//Modify TinyMCE editor to hide H1. 
function tiny_mce_remove_unused_formats( $initFormats ) {
    // Add block format elements you want to show in dropdown
    $initFormats[\'block_formats\'] = \'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre\';
    return $initFormats;
}
add_filter( \'tiny_mce_before_init\', \'tiny_mce_remove_unused_formats\' );

Update:

你正在寻找的东西在Wordpress 3.9发布之前是可能的。早些时候,您必须编写这些代码行才能使之成为可能。但不幸的是,theme_advanced_styles 已弃用,因为WP 3.9将TinyMCE更新为版本4(see the Change Log). 有关Andrew Ozz blog. <这就是以前的情况(source):

function make_mce_awesome( $init ) {
    // deprecated settings
    $init[\'theme_advanced_blockformats\'] = \'h2,h3,h4,p\';
    $init[\'theme_advanced_disable\'] = \'underline,spellchecker,wp_help\';
    $init[\'theme_advanced_text_colors\'] = \'0f3156,636466,0486d3\';
    $init[\'theme_advanced_buttons2_add\'] = \'styleselect\';
    $init[\'theme_advanced_styles\'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";
    return $init;
}

add_filter(\'tiny_mce_before_init\', \'make_mce_awesome\');

Solution:

无论如何,我有我的解决方案。您可以摆脱默认下拉列表,添加包含四种样式的格式下拉列表。这将帮助您避免与用户混淆,避免他们从下拉列表中选择样式。

禁用默认下拉列表:

function remove_default_format_select( $buttons ) {
    //Remove the format dropdown select and text color selector
    $remove = array( \'formatselect\' );

    return array_diff( $buttons, $remove );
 }
add_filter( \'mce_buttons\', \'remove_default_format_select\' );
添加新格式下拉列表(more here):

// Callback function to insert \'styleselect\' into the $buttons array
function my_new_mce_buttons( $buttons ) {
    array_unshift( $buttons, \'styleselect\' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter( \'mce_buttons\', \'my_new_mce_buttons\' );


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(
            array(
                \'title\' => \'Headline\',
                \'block\' => \'h1\'
                ),
            array(
                \'title\' => \'SubHeadline\',
                \'block\' => \'h2\'
                ),
            array(
                \'title\' => \'Statement\',
                \'block\' => \'div\',
                \'classes\' => \'statement_class\',
                \'wrapper\' => true
            )
        );
    // Insert the array, JSON ENCODED, into \'style_formats\'
    $init_array[\'style_formats\'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Attach callback to \'tiny_mce_before_init\' 
add_filter( \'tiny_mce_before_init\', \'my_mce_before_init_insert_formats\' );
最后一个。注册css文件以在编辑器中获得视觉效果:(Learn more)

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( \'custom-editor-style.css\' );
}
add_action( \'admin_init\', \'wpdocs_theme_add_editor_styles\' );
希望这有帮助。

SO网友:Vasyl

如果需要编辑block\\u formats(块格式)下拉列表,可以这样做:

add_filter(\'tiny_mce_before_init\', function($init_array) {
    $block_formats = [
        \'Paragraph=p\',
        \'Heading 1=h1\',
        \'Heading 2=h2\',
        \'Heading 3=h3\',
    ];
    $init_array[\'block_formats\'] = implode(\';\', $block_formats);

    return $init_array;
});
如果您需要添加一些自定义格式,可以这样做:

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

    $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

结束

相关推荐

在AJAX插入后初始化TinyMCE编辑器/可视化编辑器

我在自定义选项页面上有一个“repeater”样式的字段组。有一个处于隐藏状态的活动可视化编辑器,当用户单击“添加新内容”时,整行将被克隆。然后,我需要初始化克隆行中的可视化编辑器。我的代码:$(\'.repeater-add-new\').click(function(event) { event.preventDefault(); var target = $(this).data(\'repeater\'); $( \'#\' + target).fi