Home » WYSIWYGエディタTinyMCEを使う

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

インストール

DrupalでTinyMCEを使うには、このTinyTinyMCEモジュールとは別途にTinyMCEの本体を入手する必要があります。

TinyTinyMCEモジュール
http://drupal.org/project/tinytinymce

TinyMCE
http://tinymce.moxiecode.com

まず、ダウンロードしたTinyTinyMCEモジュールのtinytinymce-6.x-X.X-tar.gzファイルをsites/all/modulesディレクトリで展開します。これでsites/all/modulesの下に/tinytinymceというディレクトリが作成されます。

次にダウンロードしたTinyMCE本体のtinymce_3_X_X.zipファイルを任意の場所で展開し、作成されるtinymceというディレクトリ以下をそっくりそのまま先ほどのsites/all/modules/tinytinymceディレクトリにコピーします。つまり、TinyMCEの本体はsites/all/modules/tinytinymce/tinymceというディレクトリ以下にコピーされることになります。

ここまでやったら、管理ページ＞モジュールからTinyTinyMCEモジュールを有効にします。これで以下のような編集画面のテキストエリアの上に TinyMCEのツールバーとアイコンが表示されればOKです。

ss-tinymce-2.png

TinyMCEの2つのモードを使い分ける

TinyTinyMCEではTinyMCEのSimpleとAdvancedという２つのモードをユーザのロールに応じて使い分けることができるようになっています。上にある画像はこのうちのAdvancedモードです。Simpleモードの場合には以下のようになります。

ss-tinymce-1.png
Simple、Advancedどちらのモードでも、テキストエリアの下にある「rich text editor」というリンクをクリックすることで、TinyMCEエディタのON/OFFをその場で切り替えることができます。TinyMCE自体にもHTMLのソースコードを表示する機能(HTMLと書いてあるボタン)があるのでそちらを使うことでも同様のことができます。　尚、この「rich text editor」リンクを有効にするかどうかはTinyTinyMCEの環境設定ページで指定することができます。

Simple、Advancedのモードの割り当てはDrupalのユーザ権限のページからロールごとに指定することができます。

ss-tinymce-4.png


TinyMCEをカストマイズする

TinyTinyMCEの環境設定画面は以下のようにTinyMCEの初期設定tinyMCE.initをSimpleモードとAdvancedモード別々に指定することができるようになっています。TinyMCEのカストマイズはほとんどこの部分の設定を変更するだけで済んでしまいます。この設定は直接javascriptコードを記述するために見た目ちょっとわかりずらいとは思いますが、その分後で説明するWYSIWYGモジュールを使った方法よりも詳細にわたるカストマイズが可能です。この点がTinyTinyMCEを使う利点のひとつだと思います。

ss-tinmce-3.png
まず、Advancedモードツールバーの見た目をちょっと替えてみましょう。

ツールバーの外観(skin)はsites/all/modules/tinytinymouse/tinymce/jscript/tiny_mce/themes/advanced/skinsディレクトリにあります。標準のものと"o2k7"というのの２種類がありますので、ここではo2k7を使うことにしました。自分のskinを作成する場合には、ここに新しいディレクトリを作成してそこにCSSファイルや画像データなどをいれることになります。（今回は省略します）

設定画面で「TinyMCE init script for advanced mode」というラベルのテキストエリアを編集して、skin : "o2k7" という行を追加するだけです。
  1. tinyMCE.init({
  2.   mode : "exact",
  3.   file_browser_callback: "imceImageBrowser",
  4.   init_instance_callback : "resizeEditorBox",
  5.   theme : "advanced",
  6.   skin : "o2k7", // これを追加
  7.   ( 省略 )
  8.   template_external_list_url : "example_template_list.js",
  9.   content_css: "/drupal/sites/all/modules/tinytinymce/tinymce.css" // これも追加
  10. });
次に、編集画面のフォントサイズの変更をおこないます。理由についてはよくわからないのですがTinyMCE導入後、WYSIWYGエディタの編集テキストのフォントサイズがかなり小さいものになってしまったために、カストマイズをおこなってこれを調整したのですがその方法をここでは解説します。

これは、TinyMCE用のCSSファイルを新規作成してそこで指定をおこなう必要があります。ファイル名や設置場所はどこでも良いのですが、ここではtinymce.cssという名前のファイルをTinyTinyMCEモジュールディレクトリ/tinytinymceに作成することにします。

tinymce.cssの中身はこんな感じです。
  1.  mceContentBody {    
  2.   font-size: 12px;
  3. }
フォントサイズは1emのような指定でも良いですが、私の場合は使っているテーマのフォントサイズの設定の関係で12pxを固定で使うことにしました。　このtinymce.cssファイルの存在をTinyMCEに教えるには先程と同じTinyMCE.initのパラメータに設定をします。

content_css: "(作成したCSSのパス)" となります。ここではサーバのDocumentRoot下のdrupalというディレクトリがDrupalのルートディレクトリになっているために /drupal/sites/all/modules/tinytinymce/tinymce.css としました。

 

Your rating: None Average: 3 (2 votes)