pict-tinymce.png DrupalでTinyMCEを使う方法はいくつかありますが、今回はWysiwygというモジュールを使用する方法を紹介します。

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のところにチェックが入っているはずです。

ss-wysiwyg-1.png

Wysiwygモジュールでは使用するWYSIWYGエディタをDrupalの入力書式ごとに指定することができます。ここではTinyMCEしかインストールしていませんので、Filtered HTMLもFull HTMLもどちらもTinyMCEを使うことにします。

次に、それぞれの入力書式でのTinyMCEの設定をおこないます。

ss-wysiwyg-2.png

設定できる項目は多いのですがツールバーに追加するボタンの選択だけおこなえばあとはだいたいデフォルトのままで大丈夫です。ここではFiltered HTMLですので最低限のボタンのみ選択します。

ss-wysiwyg-3.png
それぞれの入力書式で使うツールバーのボタンを選択し、こんな感じになりました。このようにボタンの選択などをチェックボックスを使って簡単にできるのは便利ですが逆にボタンの順番を変えたり、間に区切り線を入れたりといった細かい設定するのが困難なことが現時点ではマイナス点でしょう。

設定項目であと1カ所注意が必要なのは「改行コードを除去する」設定です。ここは使用している他のフィルタとのかねあいで場合によってはチェックをはずしておいた方がいいかもしれません。

ss-wysiwyg-4.png
前回紹介したTinyTinyMCEモジュールと違ってロールではなく入力書式を使って使用するエディタやその設定を変更できるので、たとえばTinyMCEとかFCKEditorという入力書式を作成しておきユーザが入力時に使用するエディタを選択できるようにする、といったことがWysiwygモジュールを使うと可能になります。

 

まだ投票はありません