WysiwygモジュールとTinyMCEの導入

Drupal6のコアにはWYSIWYGエディタが含まれていません。ですので、自サイトのユーザのためにWYSIWYGエディタを導入したいという場合にはサードパーティのモジュールを使用することになります。現在のところ、CocoaSpaceでは管理者以外のユーザに記事を書いてもらうことはありません(コメントは別として)のでWYSIWYGエディタは必要ありません。しかし、将来的に承認済ユーザに記事を書いていただくようなサイトを構築したら必要になるかもしれないので、CocoaSpaceに試しに導入してみました。(もちろん、まったく使用していません(笑)。)

CocoaSpaceで今回使用したのはWysiwygというモジュールです。以前はWysiwyg APIと呼ばれていたと思います。このモジュールをインストールすることによって、Drupal上でTinyMCEやFCKeditorなどのサードパーティのWYSIWYGエディタを利用できるようになります。drupal.orgにはそのものズバリのTinyMCEモジュールもありますが、そのプロジェクトページにもあるように、もはやWysiwygモジュールに取って代わられています。

インストール

STEP 1

先ずWysiwygモジュールを通常どおりsites/all/modulesにアップロードし、admin/build/modulesから有効化します。

STEP 2

Wysiwygモジュールを有効化した後にadmin/settings/wysiwygを開くと、TinyMCEを含む利用可能な9つのエディタのインストール方法の説明があります。TinyMCEのダウンロード先へのリンクもありますので、ファイルをダウンロードします。TinyMCEの日本語language packが必要な方は同時にダウンロードしてください。

admin/settings/wysiwygでも説明されていますが、TinyMCEをsites/all/libraries(ディレクトリがなければ作成してください)にアップロードします。language packを利用する場合はsites/all/libraries/tinymce/jscripts/tiny_mceにアップロードします。作業完了後にadmin/settings/wysiwygのページをリロードし、TinyMCEが利用可能になっていたらインストール成功です。

設定

admin/settings/wysiwygで今インストールしたエディタを有効にします。CocoaSpaceではFull HTMLではなくFiltered HTMLでWYSIWYGエディタを利用することにしました。理由は、もしも不特定多数のユーザに記事を書いてもらうようなサイトの場合、Full HTMLの権限を与えるのはどうかと思うからです。管理者(user/1)や信頼できる投稿者だけが利用するなら、Full HTMLを利用したほうが設定は簡単だと思います。

Filtered HTMLを利用する場合の注意点

使用できるHTMLタグ

Full HTML以外の入力書式を使用している場合、使用できるHTMLタグが限られていますので、admin/settings/filters/1/configureで、「使用できるHTMLタグ」という項目に、<p>や<img>などを追加しました。実はWysiwygモジュールとTinyMCEだけを導入しても、ユーザがノードの編集画面から画像をアップロード->本文に挿入という作業ができませんが、別モジュールで実現できますので、<img>タグを追加しました。この作業をしないと、ノードの編集画面ではWYSIWYGエディタに狙いどおりに画像が表示され、改行がされていても、いざ保存してノードを表示すると画像と改行がフィルタされ、無効になってしまいます。

CSSの設定

TinyMCEのボタンで左寄せ、右寄せなどのalignをすると、インラインのスタイルタグを使用してしまうようです。しかし、Filtered HTMLではスタイルタグを利用できません。なにより、インラインでスタイルタグを挿入するのはあまりよい方法とは思えないので、テーマのCSSファイルのクラスで左右にfloatできるようにしたいと思います。admin/settings/wysiwyg/profile/1/edit(最初に有効にしたエディタのprofileが1ということになります)で以下のように設定しました。

a. Buttons and pluginsでFont styleを有効化。

b. CSSでEditor CSSにUser theme CSSを選択し、CSS classesに以下のように記入。

画像左寄せ=image-left  
画像右寄せ=image-right

c. 使用しているテーマのCSSファイルに

.image-left {
  float: left;
  margin: ;
}
.image-right {
  float: right;
  margin: ;
}

marginはお好みで設定してください。

他にもDrupalコアのfilterとの兼ね合いなど細かい調整が必要かと思いますが、テスト環境でご自分で確認しながら調整してください。

WysiwygとTinyMCEの導入 - Font style

画像でも見ることができますが、CocoaSpaceでは画像ボタンを有効にしていません。というのも、上記のCSSでの画像のalignとFileField Insert(FileField Insertのプロジェクトは終了し、Insertに受け継がれました。)、Image Resize Filter、FileField Sources、IMCEなどを使用することでノード本文へうまく画像を挿入し、スタイルすることができたからです。それらについてまとめた記事も近いうちに掲載したいと思います。

この記事もWYSIWYGエディタで書こうとしましたが、今回のようにコードを書いたりする記事には使えませんし、他の部分も調整不足だったりと、まだまだ慣れないことが多くて苦労しています。