NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

wp_editor()で呼び出したビジュアルエディタにエディタスタイルを適用する

bell賞味期限切れコンテンツ

この記事は公開または最終更新から436日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

管理画面上のビジュアルエディタ(TinyMCE)にてスタイルを表側と揃える際は、

でいけますが、それ以外の部分でビジュアルエディタを使うために wp_editor() 関数を使った場合、このスタイルは適用されないようなので、なんとかする方法を調べてみました。

wp_editor のオプションのなかに、 editor_css というのもあるんですが、ここに書いてもいまいちうまく動きませんでした。
あと、ここに書く場合、直接記入するので大量に同じようなエディタスタイルを適用した wp_editor を使う場合は修正が面倒だったり、スタイルを細かく指定したい場合なんかは都合がわるいですよね。

できれば管理画面のとき同様に外部 CSS をロードして使いたいものです。

で、そのやり方なのですが、wp_editor() 関数に渡す $settings のなかにある tinymce というオプションを使います。
これは、初期値は true で、つまりビジュアルエディタを使うという設定です。

デフォルトがこれなんで、ここは true / false でしか指定できないのかと思ってたんですが、ちゃんと読んでみると、

配列) (optional) TinyMCEを読み込むか。配列を使用して、TinyMCEの設定を行うことが出来ます。
初期値: true

となってます。つまり、配列で更に TinyMCEをいじることができる、というわけですね。

で、tinymce() 配列のうち、エディタ部分のスタイルシートは「content_css」に指定します。

具体的にはこんな感じ

スタイルシートのパスはそれぞれの環境に合わせてください。

全体で書くと、こんなかんじ。
あとで修正しやすいように CSS のパスは別だししてみました。

これで外部のエディタでも外出ししたCSSファイルを使ってスタイルシートを本文と揃えることができます。

参考

How to add editor-style.css styling to wp_editor on front end for comments – WordPress Development Stack Exchange

関数リファレンス/wp editor – WordPress Codex 日本語版

TAGS