я могу добавить пользовательский формат к опции формата на текстовой панели?


16

В текстовом редакторе, где вы можете установить заголовки и другие параметры, можно ли добавить свои собственные стили для использования клиентами? и даже удалить ненужные?


2
WP3 и TinyMCE так запутались в этом аспекте. Я не могу поверить, что невозможно легко добавить или настроить чертовы форматы, как в CKEditor.
Черувим

1
Я согласен, это полная боль.
Мягкий пух

Ответы:


17

«Классический» редактор TinyMCE имеет два выпадающие: formatselectдля стилей абзацев и styleselectдля символьных стилей - которые также могут содержать стили абзаца, чтобы сделать его более запутанным. Конфигурация в WordPress по умолчанию показывает только выпадающий формат . Если вы примените пользовательскую таблицу стилей к редактору, TinyMCE сможет использовать ее, чтобы выбрать имена классов и добавить их в стиль. выпадающий но это не мне.

Начиная с версии 3.0 вы можете позвонить add_editor_style()в свой, functions.phpчтобы добавить таблицу стилей в редактор. По умолчанию он находится editor-style.cssв каталоге вашей темы. До версии 3.0 вам нужно подключиться к mce_cssфильтру, чтобы добавить URL в таблицу стилей редактора. Это в конечном итоге в на content_cssзначение конфигурации TinyMCE .

Чтобы добавить раскрывающийся список стилей , этот styleselectпараметр должен появиться в одном из массивов конфигурации панели кнопок ( theme_advanced_buttons[1-4]в TinyMCE, отфильтрованном mce_buttons_[1-4]в WordPress). Список форматов блоков управляется с theme_advanced_blockformatsвозможностью TinyMCE , который можно добавить в массив управления в tiny_mce_before_initфильтре. Если вы хотите настроить имена выпадающих стилей (а не только имена классов CSS), посмотрите на эту theme_advanced_stylesопцию . Вы также можете использовать более сложную style_formatsопцию, которая дает вам больше гибкости в определении стилей.

Соответствующий код PHP со всеми хуками и конфигурацией по умолчанию находится wp-admin/includes/post.phpв функции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;
}

Есть ли специальный формат .css должен принимать с помощью add_editor_style? кажется, ничего не происходит
Mild Fuzz

1
@ Мягкий Fuzz: мой предыдущий ответ вводил в заблуждение, потому что WordPress показывает только один из двух необходимых выпадающих списков. Я обновил свой ответ, добавив второй выпадающий список и контролируя его.
Ян Фабри

1
@ Мягкий пух: параметры различных style_formatsэлементов описаны на соответствующей formatsвики-странице.
Ян Фабри

1
больше не производит ошибок, но не имеет никакого эффекта!
Мягкий пух

1
json_encode генерирует «а не», поэтому javascript ломается. Вам нужно сделать str_replace ('' ', "'", json_encode ($ style_formats))
cherouvim

0

В соответствии с здесь раскрывающийся список формата TinyMCE больше не показывает предварительный просмотр стиля

У Кара все было правильно, вам нужно сбросить стили по умолчанию, чтобы увидеть новые стили ...

unset($init['preview_styles']);

return $settings;

Пожалуйста, добавьте больше деталей, например, не ясно, что $settingsздесь. Спасибо
Birgire
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.