Как настроить TinyMCE4 в WP 3.9 - старый способ для стилей и форматов больше не работает

10

До WP 3.9 у меня были следующие два фильтра, которые применялись в functions.php:

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

function mce_mod( $init ) {
    $init['theme_advanced_blockformats'] = 'p,h3,h4';
    $init['theme_advanced_styles'] = "Header gross=mus-bi news-single-bighead; Header klein=mus-bi news-single-smallhead; Link=news-single-link; List Items=news-single-list";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

так что в раскрывающемся списке форматов абзаца отображаются только значения p, h3 и h4, а в раскрывающемся списке пользовательских стилей - "Header gross", "Header klein" и т. д. Но, к сожалению, wp и tinymce больше не беспокоятся, так как wp 3.9, я вижу только выпадающий список стандартных форматов абзацев

пункт

а также раскрывающийся список стандартных стилей:

стили

До сих пор я не нашел никаких документов о том, изменились ли какие-либо хуки с обновлением до tinymce 4. Кто-нибудь знает? С наилучшими пожеланиями Ральф

Обновление: Хорошо, основываясь на небольшом количестве исследований и комментариях ниже, я думаю, что я понял:

//Creating the style selector stayed the same
function my_mce_buttons( $buttons ) {
   array_unshift( $buttons, 'styleselect' );
   return $buttons;
}
add_filter('mce_buttons', 'my_mce_buttons');

function mce_mod( $init ) {
   //theme_advanced_blockformats seems deprecated - instead the hook from Helgas post did the trick
   $init['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";

   //$init['style_formats']  doesn't work - instead you have to use tinymce style selectors
   $style_formats = array(
    array(
        'title' => 'Header 3',
        'classes' => 'mus-bi news-single-bighead'
    ),
    array(
        'title' => 'Header 4',
        'classes' => 'mus-bi news-single-smallhead'
    ),
    array(
        'title' => 'Link',
        'block' => 'a',
        'classes' => 'news-single-link',
        'wrapper' => true
    )
   );
   $init['style_formats'] = json_encode( $style_formats );
   return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');
ermarus
источник
Нет, я не видел. Спасибо! Но, к сожалению, с помощью описанного там кода можно создать кнопку только вместо изменения стиля и раскрывающихся списков абзацев. Надо продолжать читать и исследовать.
ermarus
Вот как вы можете сохранить исходные пункты меню style_selectи добавить к нему меню «Классы». wordpress.stackexchange.com/questions/143689/…
Howdy_McGee

Ответы:

19

Если вы заглянете class-wp-editor.phpвнутрь, то обнаружите, что используемый вами фильтр все еще там, но настройки другие.

self::$first_init = array(
                    'theme' => 'modern',
                    'skin' => 'lightgray',
                    'language' => self::$mce_locale,
                    'formats' => "{
                        alignleft: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                        ],
                        aligncenter: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                        ],
                        alignright: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                        ],
                        strikethrough: {inline: 'del'}
                    }",
                    'relative_urls' => false,
                    'remove_script_host' => false,
                    'convert_urls' => false,
                    'browser_spellcheck' => true,
                    'fix_list_elements' => true,
                    'entities' => '38,amp,60,lt,62,gt',
                    'entity_encoding' => 'raw',
                    'keep_styles' => false,
                    'paste_webkit_styles' => 'font-weight font-style color',

                    // Limit the preview styles in the menu/toolbar
                    'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',

                    'wpeditimage_disable_captions' => $no_captions,
                    'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
                    'plugins' => implode( ',', $plugins ),
                );

Я предполагаю, но я думаю, что вам нужно изменить ключ массива, на который вы нацеливаетесь formats.

РЕДАКТИРОВАТЬ Оставив это на месте, но ОП подтверждает, что это не делает то, что он пытается.

function mce_mod( $init ) {
        $init['formats'] = "{
                            alignleft: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                            ],
                            aligncenter: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                            ],
                            alignright: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                            ],
                            strikethrough: {inline: 'del'}
                        }";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

Имейте в виду, что это абсолютно не проверено, поэтому ваш пробег может отличаться. (И не используйте на производственном сайте, пока вы не проверили его).

Продолжая дальше

Копать глубже форматы, кажется, пользовательская кнопка tinyMCE. Вы можете видеть, что formatselectкнопка добавлена mce_buttons_2в class-wp-editor.php. И тогда я отследил это до tinymce.js:

    editor.addButton('formatselect', function() {
        var items = [], blocks = createFormats(editor.settings.block_formats ||
            'Paragraph=p;' +
            'Address=address;' +
            'Pre=pre;' +
            'Heading 1=h1;' +
            'Heading 2=h2;' +
            'Heading 3=h3;' +
            'Heading 4=h4;' +
            'Heading 5=h5;' +
            'Heading 6=h6'
        );

Имея это в виду, я думаю, что новая цель будет 1. (в идеале) изменить editor.settings.block_formatsили 2. удалить эту кнопку, отфильтровав mce_buttons_2и добавив свою собственную версию.

Проверено и работает

function mce_mod( $init ) {
    $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4';

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

    $init['style_formats'] = json_encode( $style_formats );

    $init['style_formats_merge'] = false;
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

function mce_add_buttons( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

Небольшое предупреждение : я не уверен, где добавить стили для самих выпадающих элементов. В образце TinyMCE опция "Red Headline" - красная. Я не мог понять это. Пожалуйста, дайте мне знать.

helgatheviking
источник
спасибо хельга! Я тоже заглянул в class-wp-editor. Но не был уверен, какой должен быть синтаксис (не так много документации, связанной с wp, для обновленного tinymceapi). попробовал ваше предложение сейчас. те же результаты, что и с моими первоначальными фрагментами. TinyMCE не возражает против того, как выглядит инициал. на сайте tinymce я нашел пример для пользовательских форматов, только для js, и мне не удалось адаптировать его к wp и php: tinymce.com/tryit/custom_formats.php
ermarus
1
Отличная помощь, спасибо! Просто хотел добавить, что block_formatsопцион не может иметь трейлинг; , Я строил значение из сохраненных настраиваемых параметров и имел конечный результат; это разрушило список. Надеюсь, это сэкономит кому-то несколько минут.
Адам Папа
1
@indextwo Да, я решил это здесь (как можно лучше) и решил ... эй ... сообщение в блоге! Вы не получите класс на промежутке, даже если вы определите его как встроенный? array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ),?
helgatheviking
2
Элементы в меню формата наследуют стили из вашего editor-styles.css, за исключением стилей цвета. Если вы хотите использовать и цветовые стили, добавление этого кода в функцию mce_mod () сработало для меня:unset($init['preview_styles']);
Далтон
1
@helgatheviking относительно вашего небольшого предостережения : вы можете включить все стили, если вы установите $init['preview_styles'] = 'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow';. Я предполагаю, что это по сути то же самое, что предложил @Dalton, хотя и более явно. Это просто устанавливает значения по умолчанию, согласно документации
tmce