web-dev-qa-db-ja.com

カスタムテキストスタイルでTinyMCEの実際の段落ドロップダウンを編集する方法

私はバックエンドユーザーに選択できる4つのテキストスタイルだけを与えたいと思います。見出し、小見出し、段落、そして.statementというスタイル。

「TinyMCEでのカスタムスタイル」のような用語の検索は、常にワードプレス自体からのこの記事で終わりました。 https://codex.wordpress.org/TinyMCE_Custom_Styles

enter image description here 

残念ながら、他のドロップダウンへのアクセスを許可したくありません。現在のコンテンツのドロップダウンを取り除き、それに自分のスタイルを追加する必要があります。

最初のステップでは、実際にはドロップダウンとビジュアルエディタ自体の両方でそれらがどのように見えるかは気にしません。ここで重要なのは、不要なスタイルオプションを削除することです。デザインとフロントエンドがサポートしないオプション。 （エディタ自体の内部の外観を変更するのは素晴らしいことですが）

。

function my_mce_before_init_insert_formats( $init_array ) {

私は$init_arrayを見ましたが、ドロップダウンがどこに作成されているのか見つけることができませんでした。

あなたの提案がスリル満点です:)

ルイ！

customizationtinymcevisual-editor
2
kater louis

私は同じ問題を抱えていました、そして、ここであなたができることです。以下のコードは、ブロックフォーマットセクションのh1タグを無効にします。同じ方法で、他のタグを無効にして自分のタグを追加することもできます。しかし、私はどのようにそれらにカスタムCSSスタイルを追加するかについてはよくわかりません。このコードがどの方法でDigに役立つかのヒントをあなたに与えることを願っています。

//Modify TinyMCE editor to hide H1. 
function tiny_mce_remove_unused_formats( $initFormats ) {
    // Add block format elements you want to show in dropdown
    $initFormats['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre';
    return $initFormats;
}
add_filter( 'tiny_mce_before_init', 'tiny_mce_remove_unused_formats' );


更新：

あなたが探しているものは、Wordpress 3.9がリリースされる前に可能でした。それを可能にするために、以前はそれらのコード行を書かなければなりませんでした。しかし残念なことに、WP 3.9がTinyMCEをバージョン4に更新したので（ 変更履歴を参照 ）、theme_advanced_stylesは非推奨となりました。 Andrew Ozzブログの詳細情報 。

これは以前のものです（ source ）：

function make_mce_awesome( $init ) {
    // deprecated settings
    $init['theme_advanced_blockformats'] = 'h2,h3,h4,p';
    $init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';
    $init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';
    $init['theme_advanced_buttons2_add'] = 'styleselect';
    $init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";
    return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');


解決策：

とにかく、私はあなたの仕事のための私の解決策を持っています。デフォルトのドロップダウンを取り除き、4つのスタイルを含むフォーマットをドロップダウンで追加できます。これにより、ユーザーがスタイルを選択する際のドロップダウンから、ユーザーとの混乱を避けることができます。

デフォルトのドロップダウンを無効にします。

function remove_default_format_select( $buttons ) {
    //Remove the format dropdown select and text color selector
    $remove = array( 'formatselect' );

    return array_diff( $buttons, $remove );
 }
add_filter( 'mce_buttons', 'remove_default_format_select' );


新しいフォーマットドロップダウンを追加してください（ 詳細はこちら ）：

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


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(
            array(
                'title' => 'Headline',
                'block' => 'h1'
                ),
            array(
                'title' => 'SubHeadline',
                'block' => 'h2'
                ),
            array(
                'title' => 'Statement',
                'block' => 'div',
                'classes' => 'statement_class',
                'wrapper' => true
            )
        );
    // 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' );


最後のもの。エディタで視覚的に見えるようにCSSファイルを登録します。（ 詳細 ）

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );


お役に立てれば。

3
Vlad