Dropdown стилей TinyMCE не добавляет html-теги, кроме span

Содержание

Вопрос или проблема
Ответ или решение
Основная проблема
Решение проблемы
Итоги

Вопрос или проблема

Я пытаюсь добавить h1, h2 и другие элементы в выпадающее меню стилей TinyMCE вместе с другими HTML элементами. Я попробовал следующий код, но проблема в том, что стили добавляются только в том случае, если я использую span в качестве значения ‘block’. Если я использую div, h3 или h4, код ничего не добавляет.

Я много искал решение, но не нашел ничего полезного.

Не могли бы вы подсказать, как исправить эту проблему?

Для справки: я использую WordPress 3.5.1.

function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Регистрируем наш колбек для соответствующего фильтра
add_filter('mce_buttons_2', 'my_mce_buttons_2');


// Функция колбека для фильтрации настроек MCE
function my_mce_before_init_insert_formats( $init_array ) {  
// Определяем массив style_formats
$style_formats = array(  
    // Каждый дочерний массив - это формат с его собственными настройками
    array(  
        'title' => 'Заголовок',  
        'block' => 'h4',  
        'classes' => 'headings',
        'wrapper' => true,

    ),  
    array(  
        'title' => 'Подзаголовок',  
        'block' => 'span',  
        'classes' => 'subheadlines2',
        'wrapper' => true,
    ),

);  
// Вставляем массив, закодированный в JSON, в 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );  

return $init_array;  

 } 

// Подключаем колбек к 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Я столкнулся с той же проблемой, попробуйте убрать значение wrapper из вашего массива настроек.

array(  
    'title' => 'Заголовок',  
    'block' => 'h4',  
    'classes' => 'headings'
),

Я думаю, произошло недоразумение…

То, что вы пытаетесь сделать, это переопределить стили редактора по умолчанию… это довольно просто, просто добавьте в functions.php:

add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); 

function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

И создайте файл custom-editor-style.css, где вы переопределите CSS классы:

#tinymce {}

#tinymce h1 {}    
#tinymce h2 {}
#tinymce h3 {}

В выпадающем меню форматов вы не можете переопределить классы по умолчанию, но можете создавать новые. Как вы заметили, они всегда будут оборачивать содержимое, которое вы хотите отформатировать, в контейнер span или div. К сожалению, вы не можете накладывать внутренние классы для этой цели, кроме как редактируя текст в HTML, а не в визуальном редакторе.

Ответ или решение

Чтобы добавить заголовки (h1, h2 и т.д.) в выпадающий список стилей TinyMCE, необходимо учитывать несколько важных моментов, особенно если вы хотите, чтобы они правильно отображались в визуальном редакторе WordPress.

Основная проблема

Как вы уже заметили, стили по умолчанию добавляют только <span> элементы. Когда вы пытаетесь использовать другие блоковые элементы, такие как <h4>, они не добавляются должным образом из-за настройки TinyMCE и его ограничений.

Решение проблемы

Для решения вашей задачи вы можете воспользоваться следующими шагами:

Удалите значение wrapper: В ваших настройках форматов, удалите параметр wrapper => true. Он заставляет TinyMCE создавать контейнер (обычно <span> или <div>) вокруг вашего содержимого, и это может мешать использованию заголовков.
Обновите функцию следующим образом:

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

function my_mce_before_init_insert_formats( $init_array ) {  
    $style_formats = array(  
        array(  
            'title' => 'Заголовок',  
            'block' => 'h4',  // Замените на h1, h2 или h3 в зависимости от нужного заголовка
            'classes' => 'headings',
        ),  
        array(  
            'title' => 'Подзаголовок',  
            'block' => 'span',  // Вы можете оставить span для других стилей
            'classes' => 'subheadlines2',
        ),
    );  
    $init_array['style_formats'] = json_encode( $style_formats );  
    return $init_array;  
} 

add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Создайте собственные стили для редактора: Помните, что вы также можете добавить пользовательские CSS-стили для TinyMCE, чтобы стилизовать ваши заголовки и другие элементы. Для этого создайте файл custom-editor-style.css и добавьте необходимые CSS-правила.

#tinymce h1 {
    font-size: 2em;
    color: #333; 
}

#tinymce h2 {
    font-size: 1.75em;
    color: #666; 
}

#tinymce h3 {
    font-size: 1.5em;
    color: #999; 
}

Итоги

С помощью указанных шагов вы сможете успешно добавить заголовки в ваш выпадающий список стилей TinyMCE без использования оберток, таких как <span> или <div>. После внесения изменений заголовки будут отображаться корректно и применяться к вашему тексту. Не забудьте проверить, как они выглядят в визуальном редакторе, чтобы убедиться, что все настроено так, как вам нужно.