Как добавить пользовательский CSS (параметр темы) в TinyMCE?

Я пытаюсь добавить пользовательский 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}; }"; } 

Мне нужен метод для получения этого пользовательского стиля в визуальный редактор. Любая помощь будет принята с благодарностью.

Solutions Collecting From Web of "Как добавить пользовательский CSS (параметр темы) в TinyMCE?"

Решение 1

Это работает как решение javascript:

Пример:

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

просто откройте консоль js и вставьте ее для быстрого теста. Чтобы настроить таргетинг на конкретный редактор, необходимо использовать:

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

Это введет предоставленную строку в редакторы iframe <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 // eg 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;}"; } 

WordPress предоставляет фильтр mce_css , который можно использовать для добавления пользовательских таблиц стилей в Visual Editor. Согласно Кодексу:

Файл может быть файлом .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' ); 

Я, вероятно, опаздываю на эту вечеринку, но после использования вышеуказанного решения я вскоре понял, что скорость загрузки страницы редактора сильно искалечена! Оглядываясь на код, я понял, что код продолжает выполняться уже после инициализации 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-прослушиватель используется для выполнения кода после инициализации активного редактора. Надеюсь, это поможет кому-то там. С уважением.

Я принял решение выше на @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.

Это модифицированное решение, размещенное на форумах 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() с этим.