web-dev-qa-db-ja.com

TinyMCEエディタでリンクするCSSクラスを追加

解決策を探す際に、スタイルシート内にすでに存在するCSSスタイルのドロップダウンを有効にするためのプラグインを見つけました。私が欲しいのは、エディタがテキストボックスからCSSクラスを追加できるようにすることです。それで、あなたがこのイメージを考慮するならば：

enter image description here

私が理想的に探しているのは、その下のTitleと呼ばれる Class という別のテキストボックスを取得する方法です。サイト内の他の機能には、CSSクラスを入力する自由が必要です。私はこれを達成することができる方法について何かアイデアはありますか？

どうもありがとう！

linkstinymce
7
maGz

私は自分のサイトに WP Edit プラグインを追加することでこれを解決することができた。それは Advanced Link ボタンを持っていて、それは私（またはエディタ）が手動でクラス名をタイプすることを可能にします。

1
maGz

1つの選択肢は、MCEの[スタイル選択]メニューにクラスを追加することです。 "TinyMCEカスタムスタイル" Codexページからの変更 最初に、スタイル選択をエディタに追加する必要があります。

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');

それはエディタに新しいドロップダウンを追加します。それからあなたはあなたのカスタムスタイルを作成します：

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(  
        // Each array child is a format with it's own settings
        array(  
            'title' => 'My Link Custom Class',  
            'selector' => 'a',  
            'classes' => 'my-custom-link-class'             
        )
    );  
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

TinyMCE 4.0へのアップグレードが含まれていたWordPress 3.9では、スタイル選択ははるかに堅牢になり、リンクにのみ適用できるスタイルを定義できるというselectorルールを含みます。なかなかいいですね。

この解決策は、必要なクラスを事前に定義し、タイプミスやその他の問題がないことを確認できることを意味します。

コーデックスが指摘するように、これはあなたのスタイルをエディタに直接適用する良い editor-style.cssファイル と最もよく組み合わされます。

19
mrwweb