Wysiwygモジュールの特徴はなんと言ってもTinyMCEに限らず、FCKEditor、YUI Editor、NiceEdit等の様々なWYSIWYGエディタをサポートしていてそれらを切り替えて使うこともできる点ではないでしょうか。ここではTinyMCEを使うことだけに焦点を絞って紹介しますが、色々なWYSIWYGエディタを試してみたい場合などにもこのモジュールは便利です。
インストール
DrupalでTinyMCEを使うには、このTinyTinyMCEモジュールとは別途にTinyMCEの本体を入手する必要があります。Wysiwygモジュール
http://drupal.org/project/wysiwyg
TinyMCE
http://tinymce.moxiecode.com
ダウンロードしたWysiwygモジュールのwysiwyg-6.x-X.X-tar.gzファイルをsites/all/modulesディレクトリで展開します。これでsites/all/modulesの下に/wysiwygというディレクトリが作成されます。
次に、sites/allの下にlibrariesというディレクトリを作成します。Wysiwygモジュールで使うエディタは全てこのsites/all/librariesの下にインストールすることになります。ダウンロードしたTinyMCE本体のtinymce_3_X_X.zipファイルを任意の場所で展開し、作成されるtinymceというディレクトリ以下をそっくりそのまま先ほど作成したsites/all/librariesディレクトリにコピーします。つまり、TinyMCEの本体はsites/all/libraries/tinymceというディレクトリにコピーされることになります。
管理ページ＞モジュールでWysiwygモジュールを有効にします。そしてWysiwygモジュールの環境設定ページに行きます。TinyMCEが正しくインストールされていれば下図のようにTinyMCEのところにチェックが入っているはずです。
Wysiwygモジュールでは使用するWYSIWYGエディタをDrupalの入力書式ごとに指定することができます。ここではTinyMCEしかインストールしていませんので、Filtered HTMLもFull HTMLもどちらもTinyMCEを使うことにします。
次に、それぞれの入力書式でのTinyMCEの設定をおこないます。
設定できる項目は多いのですがツールバーに追加するボタンの選択だけおこなえばあとはだいたいデフォルトのままで大丈夫です。ここではFiltered HTMLですので最低限のボタンのみ選択します。
それぞれの入力書式で使うツールバーのボタンを選択し、こんな感じになりました。このようにボタンの選択などをチェックボックスを使って簡単にできるのは便利ですが逆にボタンの順番を変えたり、間に区切り線を入れたりといった細かい設定するのが困難なことが現時点ではマイナス点でしょう。
設定項目であと１カ所注意が必要なのは「改行コードを除去する」設定です。ここは使用している他のフィルタとのかねあいで場合によってはチェックをはずしておいた方がいいかもしれません。
前回紹介したTinyTinyMCEモジュールと違ってロールではなく入力書式を使って使用するエディタやその設定を変更できるので、たとえばTinyMCEとかFCKEditorという入力書式を作成しておきユーザが入力時に使用するエディタを選択できるようにする、といったことがWysiwygモジュールを使うと可能になります。
TinyMCEのデフォルトフォントサイズを変更する
WysiwygモジュールでTinyMCEのデフォルトフォントサイズを変更する場合にはいくつか方法がありますが、ここではTinyMCE用のCSSファイルを作成してそれを使用する方法とします。まず、TinyMCE用のCSSファイルを作成します。名前は何でもよいですが、ここではtinymce.cssとして、このファイルを使用するテーマのディレクトリに以下のように作成しました。
- body.mceContentBody {
- font-size: 0.8em;
- }
ファイルができたら次にWysiwygモジュールの設定ページでCSSの設定箇所で、使用するCSSをDefine CSSをリストから選択し、CSSファイルのパスに%b%t/tinymce.cssを指定します。こうすると、TinyMCEは指定されたCSSファイルを読み込んで使用するようになります(下図参照)
