Drupal4.6 | 4 TinyMCEでWYSIWYGなHTML入力環境を実現する

ここでは、drupal4.6用のインストールを紹介しています。4.7は、ちょっと違う部分があるので補足を参考に。

 

■TinyMCEでWYSYWIGなHTML環境を実現

ワープロソフトのようなHTMLエディタを実装して、楽ちんな入力環境を整えちゃいましょう。

FCKeditorもいいけど、Safariで使えなかったので、TinyMCEに乗り換えた。(FireFoxだとFCKeditor大丈夫)

あと、イメージファイルの取り扱いもTinyMCEだとimg_assistと組み合わせるだけでとても使いやすくなる点がよろしい。イメージファイルを使わないんだったら、FCKeditorの方が高機能でイイんだけどね。

補足:2006年7月現在、Drupal4.7 + TinyMCE4.7モジュール + TinyMCE2.0.6本体 の組み合わせは、FireFoxでの入力をおすすめ。Safariだとhtmlコードをちゃんと見られないなど、ちょっとヘン。

 

■手順

「TinyMCE本体」 と 「それをdrupalで利用するためのTinyMCE」 の2つを用意して設置する。

また、設定用にMySQLにデータをロードして、各種設定する。 という流れ。

 

■TinyMCE (drupal用) をダウンロードする

http://drupal.org/project/tinymce
このページの「Download latest release (4.6.0, 15/04/2005 - 20:15)」をくリックしてDrupal4.6用のtinymce-4.6.0.tar.gzをダウンロードする。(drupal4.7のヒトは、4.7用をダウンロードする)

1. 「TinyMCEのモジュール」を解凍する。
$ tar zxvf tinymce-4.6.0.tar.gz

2. Drupalのモジュールディレクトリ modules/ へ解凍したtinymceを配置する。
$ mv tinymce modules/
配置したtinymce/INSTALL.txtを読む。TinyMCE本体を拾ってこいと書いてある。

 

■TinyMCE (本体) をインストールする

 「TinyMCEの本体」をダウンロードする。
http://tinymce.moxiecode.com/download.php
今回は、INSTALL.txtに書いてある1.4.4ではなく、最新のtinymce_2_0_4.tgzを拾ってくることにした。
(補足:後日ダウンロードしたtinymce_2_0_6_1.gzは、tar.gzファイルでした。しっかり解凍させましょう)
解凍したtinymceディレクトリを modules/tinymce/tinymce として配置する。
要するに / モジュールのディレクトリ / tinymceモジュールのディレクトリ / tinymce本体のディレクトリ という配置になる。

 

■ MySQLのデータベース設定を読み込む(ポスグレ用もあり)

$ cd modules/tinymce
$ mysql -uMyName -p DrupalDB < tinymce.mysql

drupal4.7のヒトは、上記読み込み作業をやらなくてよろし。

■ tinymceモジュールを有効にする

管理 > モジュール > tinymce

 

 

■tinymceモジュールのアクセス権を得る(4.7のヒト)

administer > access control > tinymce module

でチェックボックスにチェックを入れる。(4.7はまだ日本語化してないので上記は英語表記です)

 

 ■ オプションを設定する

管理 > 設定 > tinymce
「Create new profile」をクリックして新しい設定を作る。
authenticated userにチェック。
テーマは、advancedに変更。

 

4.7のヒト用は、こちら。

administer > settings > tinymce

「create a new profile」 をクリック。

「Basic setup」 をクリック。

「Profile name」 に MyProfile など適当に入力。

「Roles allowed to use this profile」 の authenticated user にチェックを入れる。

「Default state」 を true にしておく。

一番下の 「Create profile」 ボタンを押して、プロファイルを作成する。

 

■さぁ、入力するぞ!

ページを新規に作成すると、エディタが表示されて、便利、便利。

Full HTML を指定してからページを保存しましょう。(これ、重要!)

 

4.7のヒトは、「Input format」のトグルをクリックすると、Full HTMLのラジオボタンが現われます。

 

■毎回、Full HTML を指定するのが面倒なので

管理 > 入力フォーマット > Full HTML デフォルトに設定する

 

■ いつでもTinyMCEを使いたい

Default tinymce state: をONにしておく。

 

■ カラーパレットを使えるようにする

$ vi modules/tinymce/tinymce.module
277行目を変更。(vi だと 277g で移動する)
「forecolor」を付け加える。
(変更前)
      $init['theme_advanced_buttons3_add_before'] = 'tablecontrols,separator';
(変更後)
      $init['theme_advanced_buttons3_add_before'] = 'forecolor,tablecontrols,separator';

 

 

■参考サイト

ちなみにインストールの方法(英語版)
http://cvs.drupal.org/viewcvs/drupal/contributions/modules/tinymce/INSTALL.txt?view=markup