Як додати спеціальний CSS (варіант теми) до TinyMCE?

14

Я намагаюся додати користувальницький CSS (встановлений через параметри теми) до візуального редактора TinyMCE в WordPress. На передньому кінці тема генерує цей CSS та виводить його на wp_headгачок. Проблема, з якою я стикаюся, - це можливість додати цей CSS-вихід у редактор.

Це неможливо зробити, add_editor_style( 'editor-style.css' )тому що нам потрібно використовувати PHP для доступу до теми теми.

Як приклад того, як це працює на передній частині:

add_action( 'wp_head', 'my_custom_colors' );

function my_custom_colors() {
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "<style type='text/css'>a { color: #{$color_1}; }";
}

Мені потрібен метод для введення цього користувальницького стилю у візуальний редактор. Будь-яка допомога буде дуже вдячна.

tinymce

— Джастін Тадлок
джерело

1

Примітка. Спеціальний CSS-вміст після вмісту є територією плагінів , і його не слід розміщувати в темі. В іншому випадку користувачі втратять свій власний CSS при переході на іншу Тему.

— Чіп Беннетт

@ChipBennett Я лише частково згоден. Це дуже залежить від того, що ви стилюєте. Крім цього, не має значення, де він знаходиться (для цього питання).

— кайзер

@ChipBennett Це стосується стилів теми, а не спеціального CSS-вмісту. Це досить стандартні речі, які можна виконати за допомогою налаштування теми. Просто мене застосувавши ці стилі. Це призначено для компліменту editor-style.css, що є тематичною територією.

— Джастін Тадлок

Зачекайте: ви говорите про динамічний стиль користувальницького редактора ? Як у: Повідомте візуального редактора (TinyMCE) про стилі, визначені опцією Тема? Якщо так, ігноруйте мій оригінальний коментар та поставіть +1 до питання.

— Чіп Беннетт

Чи можете ви подати правки та показати приклад повного набору для стилю теми? Легше було б тестувати тоді.

— кайзер

7

Рішення 1

Це працює як рішення JavaScript:

Приклад:

tinyMCE.activeEditor.dom.addStyle('p {color:red; font-size:28px;}');

просто відкрийте консоль js та вставте її для швидкого тестування. Для націлювання на конкретний редактор слід використовувати:

tinyMCE.getInstanceById('##editorID##').dom.addStyle('p {color:red; font-size:28px;}');

Це вводить наданий рядок у редакторну рамку <head><style id="mceDefaultStyles"></style> ...

Рішення 2

Використовуйте wp_ajax як обробник зворотних дзвінків, щоб додати динамічні стилі в редактор init за допомогою фільтра

add_filter('tiny_mce_before_init', 'dynamic_editor_styles', 10);

function dynamic_editor_styles($settings){
    // you could use a custom php file as well, I'm using wp_ajax as
    // callback handler for demonstration
    // content_css is a string with several files seperated by a comma
    // e.g. file1, file2, ... extend the string

    $settings['content_css'] .= ",".admin_url('admin-ajax.php') ."/?action=dynamic_styles";

    return $settings;
}

// add wp_ajax callback
add_action('wp_ajax_dynamic_styles', 'dynamic_styles_callback');
function dynamic_styles_callback(){
    echo "p {color:red} h1{font-size:48px;}";
}

— ungestaltbar
джерело

2

Я не зовсім впевнений, що з цим робити.

— Джастін Тадлок

Рішення №2 насправді має багато сенсу для мене. Я дам тестовий пробіг.

— Джастін Тадлок

Я пішов з рішенням №2. Різниця полягає в тому, що я скинув першу функцію і використовував, add_editor_style( add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) )оскільки це стандартний спосіб для тем для додавання стилів редактора.

— Джастін Тадлок

Тільки для мого власного зведення, мені було б цікаво дізнатися, чи mce_cssпрацювали на вас (якщо ви спробували це).

— Чіп Беннетт

Я насправді не пробував цього, тому що я знав, що ви можете передати файл, який не є CSS add_editor_style(), але це добре працює, дивлячись на код. Використання mce_cssнасправді є кращим рішенням у випадку, якщо вам потрібно підключитися після стилів, доданих через add_editor_style(). Однією з таких причин у темі є те, що повні URL-адреси, додані через add_editor_style(), виводяться спочатку, незважаючи на порядок додавання.

— Джастін Тадлок

10

WordPress пропонує mce_cssфільтр , який можна використовувати для додавання нестандартних таблиць стилів у візуальний редактор. Відповідно до Кодексу:

Цей файл може бути .php-файлом, що дозволяє динамічно створювати правила CSS для редактора вмісту.

Приклад зворотного виклику фільтрів Codex, змінений для теми:

function wpse120831_mce_css( $mce_css ) {
    if ( ! empty( $mce_css ) )
        $mce_css .= ',';

    $mce_css .= get_template_directory_uri() . '/dynamic-css.php';

    return $mce_css;
}

add_filter( 'mce_css', 'wpse120831_mce_css' );

— Чіп Беннетт
джерело

Містер Беннетт був швидшим, лише додав, що до моєї відповіді нижче :), але трохи інакше.

— ungestaltbar

@ungestaltbar ми фактично використовуємо два абсолютно різні фільтри. :)

— Чіп Беннетт

з тим самим результатом :)

— ungestaltbar

4

Я прийняв рішення вище від @ungestaltbar. Однак я хотів трохи розширити цю відповідь повним рішенням, яке я використовую, щоб інші могли бачити, як це працює.

add_action( 'after_setup_theme', 'my_theme_setup' );

function my_theme_setup() {

    add_editor_style(
        array(
            'editor-style.css',
            add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) ),
        )
    );
}

add_action( 'wp_ajax_my_editor_styles', 'my_editor_styles_callback' );
add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );

function my_editor_styles_callback() {

    // @todo sanitize
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "a { color: #{$color_1}; }";

    die();
}

Я сподіваюся, що нормально розмістити тут ще одну відповідь, як це. Я не бачив способу опублікувати це в прямій відповіді на моє прийняте рішення. Я все ще вчуся використовувати WPSE.

— Джастін Тадлок
джерело

Можливо, вам слід додати, add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );якщо редактор використовується на фронті (для користувачів, які не ввійшли в систему).

— OriginalEXE

Так, відповідь зі значними змінами / перетвореннями ідеально чудова. :) FYI, якби це було вирішено в якійсь проблемі в оригінальній відповіді, тоді подання редагування було б таким способом.

— Рарст

@OriginalEXE - Так. Я його оновлю.

— Джастін Тадлок

Лише порада для тих, хто знайде це пізніше, я не зміг змусити це працювати належним чином, як це представлено. Нарешті я зрозумів, що мені потрібно включати інформацію заголовка до зворотного дзвінка, щоб це було розглянуто як css. заголовок ("Тип вмісту: text / css; charset: UTF-8"); Не впевнений, чи це щось інше в моєму .htaccess чи що.

— SkyShab

4

Я, мабуть, спізнююся з цією партією, але після використання вищевказаного рішення я незабаром зрозумів, що швидкість завантаження сторінки редактора сильно покалічена! Придивившись уважно до коду, я зрозумів, що код триває виконання довго після ініціалізації tinyMCE.activeEditor. У коді використовується метод setInterval (), який оцінює вираз через задані інтервали, я вважаю, що це було тому, що ви не могли визначити, в який момент під час виконання коду буде доступний "activeEditor". Це те, що звів швидкість сторінки на коліна.

Набагато краще рішення, яке я використовую для створення плагіна, це таке

   /**
     * Extend TinyMCE config with a setup function.
     * See http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onInit

     */
    function custom_tinymce_css($init) {

      $css = get_option('some_css'); 

     ?>

        <script type="text/javascript">            

            function addTempCSS( ed ) {
                ed.onInit.add( function() {
                    tinyMCE.activeEditor.dom.addStyle(<?php echo json_encode($css) ?>);
                } );
            };
        </script>

        <?php
        if (wp_default_editor() == 'tinymce')
            $init['setup'] = 'addTempCSS';

        return $init;
    }
    add_filter('tiny_mce_before_init', 'custom_tinymce_css');

Тут власний слухач TinyMCE використовується для виконання коду після ініціалізації активного редактора. Я сподіваюся, що це допоможе комусь там. З повагою.

— Ayebare M
джерело

1

Це працює для мене, це просто застарілий виклик API в tinymce 4.0, вам потрібно змінити ed.onInit.add (function () {... на ed.on ('init', function () {...

— Mohammed

1

Це змінене рішення, розміщене на форумах WordPress.org для цього питання: http://wordpress.org/support/topic/customdynamic-css-in-tinymce?replies=14#post-4827573

Це безумовно працює. Я не гуру JS, тому я не зовсім впевнений, що це найкраще рішення.

add_action( 'before_wp_tiny_mce', 'my_tinymce_callback' );

function my_tinymce_callback() {

    $color_1 = get_theme_mod( 'color_1', 'cc4a00' ); ?>

    <script type="text/javascript">
    jQuery( document ).ready(

        function() {
            var my_style = 'a { color: #<?php echo $color_1; ?>; }';

            var checkInterval = setInterval(
                function() {

                    if ( 'undefined' !== typeof( tinyMCE ) ) {
                        if ( tinyMCE.activeEditor && ! tinyMCE.activeEditor.isHidden() ) {

                            jQuery( '#content_ifr' ).contents().find( 'head' ).append( '<style type="text/css">' + my_style + '</style>' );

                            clearInterval( checkInterval );
                        }
                    }
                }, 
                500 
            );
        }
    );
    </script>
<?php }

Це також можна додати до файлу JS. Ви можете легко передати змінні через wp_localize_script()це.

— Джастін Тадлок
джерело