Drupalのビジュアルエディタ設定

2009/08/28(金)

以前はTinyMCEモジュールやFCKエディタモジュールとかがあって、それを他のモジュール同様にモジュールディレクトリにインストールするようになっていましたが、今年になってWYSIWYGモジュールがリリースされ、それが安定普及し様変わりしたので、まとめておきたいと思います。

以前の手順等はこちらにまとめていたのですが、TinyMCEのバージョンで問題が出たり、うまく日本語化できない、IMCEが機能しない場合がある、といった問題がありました。その辺りの問題もWYSIWYGモジュール、さらにIMCE WYSIWYG API BRIDGEモジュールで一挙に解決できるようになりました。

関連するモジュールやスクリプト

  • WYSIWYG
  • IMCE WYSIYG API BRIDGE
  • IMCE
  • TinyMCE本体、あるいはFCKエディタ等、他のビジュアルエディタ本体（WYSIWYGエディタをインストールするとダウンロード先が表示されます）
  • ビジュアルエディタの日本語化ツール（TinyMCEの場合Language PackのページからJapaneseを選択）

インストール(Tiny MCEの場合）

  1. WYSIWYG、IMCE WYSIWYG API BRIDGE、IMCEは通常のモジュールディレクトリにアップロードします。
  2. 通常のモジュールディレクトリと同じレベルで「libraries」という名前のディレクトリを作成します。
    ルート/sites/all/modules/wysiwyg
    ルート/sites/all/modules/imce_wysiwyg
    ルート/sites/all/libraries
    となります。
  3. TinyMCE本体をlibrairesディレクトリにアップロードします。
    ルート/sites/all/libraries/tinymce/jscripts・・・
    となります。
  4. TinyMCEランゲージパックをアップロードします。
    ルート/sites/all/libraries/tinymce/jscripts/tiny_mce/langs・・・
    となります。ランゲージパックのlangs、plugins、themesのディレクトリを上書きする感じでOKです。

モジュールの設定

  1. 管理セクションでWYSIWYG、IMCE WYSIWYG API BRIDGE、IMCEモジュールを有効化します。
  2. サイトの環境設定からWYSIWYGを開きます。Librariesディレクトリにアップロードしたビジュアルエディタは、入力書式毎にプルダウンリストから選択できるようになっています。その下のInstallation Instructionsに利用できるビジュアルエディタの一覧とダウンロード先、インストール方法が説明されています。（こんなに色んなビジュアルエディタがあるんですね！）
  3. 入力書式のプルダウンリストからエディタを選択すると、「編集」リンクが表示されます。Basic Setupでデフォルト状態でのビジュアルエディタの有効化、ビジュアルエディタの有効化/無効化リンク表示、言語設定等を行います。（注意！日本語ランゲージパックをアップロードしないで、jaを選ぶと機能しなくなります。）
  4. 利用するエディタの機能を選択します。あまり多機能にするとユーザーがわかりにくくなるので注意しましょう。一般的には、Bold、Bullet list、Numbered list、Undo、Redo、Link、Unlink、Image（画像）程度でいいのではないでしょうか？
  5. IMCEを利用するにはここで、IMCEとAdvanced imageにもチェックを入れておきます。

入力書式の設定

入力書式毎にビジュアルエディタ利用の有効化/無効化を設定し、サイトの環境設定＞入力書式、で対象ユーザーを設定します。自分の経験では、Filtered HTMLをデフォルトにしビジュアルエディタは無効化、Full HTMLを登録ユーザー向けにしてビジュアルエディタを有効化、といったあたりが使い易いかと思います。

これでコンテンツ作成を試してみてください。画像ボタンをクリックすると、別窓が表示され、その別窓の画像URL欄の右に「参照」ボタンが表示されていれば、IMCEも問題なく使えます。ImageFieldと較べるとまだまだ改善の余地はありそうですが、IMCSも進化しているのが分ります。

Drupal