カスタムCSS（テーマオプション）をTinyMCEに追加する方法は？

14

WordPressのTinyMCEビジュアルエディターにカスタムCSS（テーマオプションで設定）を追加しようとしています。フロントエンドでは、テーマがこの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はPlugin Territoryであり、テーマに入れないでください。そうしないと、ユーザーは別のテーマに切り替えるときにカスタム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;}');

これにより、指定された文字列がエディターのiframeに挿入されます。 <head><style id="mceDefaultStyles"></style> ...

解決策2

wp_ajaxをコールバックハンドラーとして使用して、フィルターを使用してエディターの初期化に動的スタイルを追加します

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()。テーマでそのような理由の1つは、追加されadd_editor_style()た順序に関係なく、経由で追加された完全なURL が最初に出力されるためです。

— ジャスティンタドロック

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では、実際には2つのまったく異なるフィルターを使用しています。:)

— チップベネット

同じ結果で:)

— 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

はい、重要な変更/調整を加えた回答は完全に問題ありません。:)参考までに、元の回答で修正する必要がある問題があった場合は、編集を送信してください。

— Rarst

@OriginalEXE-はい。更新します。

— ジャスティンタドロック

後でこれを見つけた人へのヒントですが、提示されているように、これを適切に動作させることはできませんでした。最終的に、コールバックにヘッダー情報を含める必要があることがわかりました。ヘッダー情報はcssと見なされます。header（ "Content-type：text / css; charset：UTF-8"）; これが私の.htaccessで何か違うのかどうかはわかりません。

— スカイシャブ14年

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リスナーを使用して、アクティブなエディターが初期化された後にコードを実行します。これが誰かを助けることを願っています。敬具。

— アイバレM
ソース

1

これは私のために働いていますが、tinymce 4.0では廃止されたAPI呼び出しがあり、ed.onInit.add（function（）{... to 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()それを使用して簡単に変数を渡すことができます。

— ジャスティンタドロック
ソース