管理画面上のビジュアルエディタ（TinyMCE）にてスタイルを表側と揃える際は、
|
1 |
<?php add_editor_style( $stylesheet ); ?> |
でいけますが、それ以外の部分でビジュアルエディタを使うために wp_editor() 関数を使った場合、このスタイルは適用されないようなので、なんとかする方法を調べてみました。
wp_editor のオプションのなかに、 editor_css というのもあるんですが、ここに書いてもいまいちうまく動きませんでした。
あと、ここに書く場合、直接記入するので大量に同じようなエディタスタイルを適用した wp_editor を使う場合は修正が面倒だったり、スタイルを細かく指定したい場合なんかは都合がわるいですよね。
できれば管理画面のとき同様に外部 CSS をロードして使いたいものです。
で、そのやり方なのですが、wp_editor() 関数に渡す $settings のなかにある tinymce というオプションを使います。
これは、初期値は true で、つまりビジュアルエディタを使うという設定です。
デフォルトがこれなんで、ここは true / false でしか指定できないのかと思ってたんですが、ちゃんと読んでみると、
（配列） （optional） TinyMCEを読み込むか。配列を使用して、TinyMCEの設定を行うことが出来ます。
初期値： true
となってます。つまり、配列で更に TinyMCEをいじることができる、というわけですね。
で、tinymce() 配列のうち、エディタ部分のスタイルシートは「content_css」に指定します。
具体的にはこんな感じ
|
1 |
'tinymce' => array('content_css' => get_stylesheet_directory_uri() . '/common/css/custom-editor-style.css'), |
スタイルシートのパスはそれぞれの環境に合わせてください。
全体で書くと、こんなかんじ。
あとで修正しやすいように CSS のパスは別だししてみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php $custom_editor_css = get_stylesheet_directory_uri() . '/common/css/custom-editor-style.css'; $editor_identifier = 'MY_CUSTOM_EDITOR'; $args = array( 'wpautop' => true, 'media_buttons' => false, 'textarea_name' => $editor_identifier, 'textarea_rows' => 5, 'editor_css' => '', 'editor_class' => 'my_custom_editor_wrap', 'teeny' => false, 'dfw' => false, 'tinymce' => array('content_css' => $custom_editor_css), 'quicktags' => true, 'drag_drop_upload' => false ); $editor_content = ''; wp_editor($editor_content,$editor_identifier,$args); ?> |
これで外部のエディタでも外出ししたCSSファイルを使ってスタイルシートを本文と揃えることができます。
コメントする