web-dev-qa-db-ja.com

テキストパネルのフォーマットオプションにカスタムフォーマットを追加できますか？

見出しやその他の設定を設定できるテキストエディタで、クライアントが使用する独自のスタイルを追加することは可能ですか？不要なものも削除しますか？

formattingtext
14
Mild Fuzz

「クラシック」TinyMCEエディターには2つのドロップダウンがあります：formatselect forparagraph stylesおよびstyleselect for文字スタイル-さらに混乱させるために、段落スタイルを含めることもできます。 WordPressの構成では、デフォルトでformatドロップダウンのみが表示されます。エディターにカスタムスタイルシートを適用すると、TinyMCEはそれを使用してクラス名を取得し、styleドロップダウンに追加できますが、これは機能しませんでした私のために毎回。

3.0以降では、functions.phpで add_editor_style() を呼び出して、スタイルシートをエディターに追加できます。デフォルトでは、テーマディレクトリのeditor-style.cssです。 3.0より前では、mce_cssフィルターにフックして、エディタースタイルシートにURLを追加する必要があります。これは content_css TinyMCE構成値 になります。

styleドロップダウンを追加するには、ボタンバー構成配列のいずれかにstyleselectオプションが表示される必要があります（ theme_advanced_buttons[1-4] TinyMCEでは、WordPressのmce_buttons_[1-4]でフィルター処理されます）。ブロック形式のリストは TinyMCEのtheme_advanced_blockformatsオプション で制御されます。これは tiny_mce_before_init フィルターで制御配列に追加できます。 styleドロップダウンの名前（CSSクラス名だけでなく）をカスタマイズする場合は、 theme_advanced_stylesオプション をご覧ください。 。より高度な style_formatsオプション を使用して、スタイルをより柔軟に定義することもできます。

すべてのフックとデフォルト設定を含む関連PHPコードは wp-admin/includes/post.php、関数wp_tiny_mce() にあります。すべてを合わせると、セットアップは次のようになります。

add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
    add_editor_style();
}

add_filter('mce_buttons_2', 'wpse3882_mce_buttons_2');
function wpse3882_mce_buttons_2($buttons)
{
    array_unshift($buttons, 'styleselect');
    return $buttons;
}

add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
    $settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';

    // From http://tinymce.moxiecode.com/examples/example_24.php
    $style_formats = array(
        array('title' => 'Bold text', 'inline' => 'b'),
        array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
        array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
        array('title' => 'Table styles'),
        array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
    );
    // Before 3.1 you needed a special trick to send this array to the configuration.
    // See this post history for previous versions.
    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}
17
Jan Fabry

こちらの通り TinyMCEフォーマットのドロップダウンでスタイルのプレビューが表示されなくなりました

カラはそれを正しく持っていました、あなたは新しいスタイルを見るためにデフォルトスタイルを設定解除する必要があります...

unset($init['preview_styles']);

return $settings;
0
user2136473