Wysiwyg Imagefieldモジュール

「Wysiwyg Imagefield」モジュールの導入について記載します。
このモジュールを導入するのに必要なモジュールです。

モジュール名 バージョンなど
Wysiwyg 6.X-2.3

対応エディタ
CKEditor, FCKeditor, jWysiwyg, markItUp, NicEdit, openWYSIWYG, TinyMCE, Whizzywig, WYMeditor, YUI、これらの中からエディタを選択可能。
ImageField 6.X-3.9

必要なモジュール
CCK
FileField
Insert 6.X-1.0

必要なモジュール
CCK6.X-2.5以降

推奨モジュール
FileField
  ImageField
  ImageCache
jQuery UI 6.X-1.4

その他必要なもの
jQuery UI Library

新規で導入したモジュール

モジュール名およびバージョン 備考
Wysiwyg ImageField 6.x-1.x-dev ImageFieldの画像を本文にInsertを使用して挿入するモジュール
Wysiwyg 6.x-2.3 wysiwygエディタ機能を追加するAPIモジュール
サードパティwysiwygエディタを選択して利用可能になる
Fckeditor-2.6.6 有名なwysiwygエディタのひとつ。wysiwygモジュールで使用
Insert 6.x-1.0 wysiwygエディタと組み合わせて本文の好きなところに画像を埋め込むモジュール
Image Resize Filter 6.x-1.12 wysiwygエディタから容易に画像のリサイズを行うモジュール
本文に貼り付けた画像をマウス操作で自由にリサイズできる。InsertのメニューでAutomaticを選択するとこれが使われる?
FileField Sources 6.x-1.2

FileFieldでアップロードしたファイルをほかのノードでも利用できるようにするモジュール 
reference existingで表示されるのはこのモジュールの恩恵?

ImageField Extended 6.X-4.1 ImageFieldの拡張モジュールで画像フィールドにインフォメーション用のテキストウィジットを追加できるモジュール??よくわかりません。

※打ち消し線のモジュールは、必要性がないと判断してアンインストールしました。

すでに導入済みのモジュール(関連がありそうなもののみ抜粋)

モジュール名およびバージョン 備考
Better Formats 6.x-1.2 入力書式を用途に合わせて柔軟にカスタマイズできるモジュール
Content Construction Kit (CCK) 6.x-2.9 今回必須のモジュール
オリジナルのコンテンツタイプやフィールドの追加ができる。
Content Templates (Contemplate) 6.x-1.2 コンテンツの表示をカスタマイズすることができるモジュール
これ自体を使ってテンプレートを作成しなくても、使われている変数に何が設定されているかを参照する用途だけにも使える。
FileField 6.x-3.9 今回必須のモジュール
CCKモジュールのアドオンモジュールで、ファイルアップロード用のフィールドを作成できるモジュール
FileField Paths 6.x-1.4 FileFieldでアップロードしたファイルのパスを指定するモジュール
パス指定にトークンが利用できる。
ImageAPI 6.x-1.9

コアのimage.incで提供しているAPIの代替となる画像APIのモジュール
リサイズ処理にはGD2かImagemagickを選択可能

ImageCache 6.x-2.0-beta10 あらかじめ作成したプリセットで画像をリサイズするモジュール
ImageField 6.x-3.9 必須のモジュール
CCKモジュールのアドオンモジュールで、画像ファイルアップロード用のフィールドを作成できるモジュール
IMCE 6.x-1.4 コンテンツに添付する画像ファイルなどをアップロードすることができる。ファイルブラウザの機能があるモジュール
jQuery UI 6.x-1.4
jQuery UI Library 1.6 
jQueryを使用したマウス操作などを便利にするモジュール
別途、ライブラリが必要
Libraries API 6.x-1.0

sites/all/libararies以下に配置した外部プログラムを拡張モジュールから読み込めるようにするAPIモジュール。
今回は、Wysiwygモジュール自体に機能があるので必要ないかも?

Pathauto 6.x-1.5 コンテンツのURLパスをあらかじめ決めたルールで作成することができるモジュール
Token 6.x-1.15 プレースホルダーを実際のデータに置換する。他のモジュールでトークンを提供するためのモジュール。
PathautoやFilefieldなどで使用される。
Views 6.x-2.12 コンテントをカスタム表示するのにGUI操作で編集でき便利。

wysiwygモジュール+Fckeditorでの使用を考えていますが、ドキュメントを見ているとTinyMCEのほうが相性がよいのかも?と思えてきます。
Drupalを始める前は、MovableTypeを使用しておりその時はTinyMCEを使っていました。
Drupalでも同じくTinyMCEを使っていましたが、動画サイト構築時にThickBoxだったか何かのモジュールで相性がよくないと知りFckeditorにしました。
現在、当初の動画サイトはやめましたのでこの機会にTinyMCEに戻そうかなぁとも思っています。

とりあえず、現在使用しているFckeditorのままのほうが比較にも都合がいいのでその先に考えようと思います。

導入

導入自体はほかのモジュールと同じなので省略します。
エラーがでることもありませんでした。
Fckeditorモジュールを使用していましたが、wysiwygモジュールにチェックをいれて~気がつけばFckeditorモジュールのほうはチェックが外れていました。

「sites/all/libraries/Fckeditor」を使うため必要ないので影響はありません。

設定

新規で導入したモジュールで設定が必要なのは、「wysiwyg」モジュールだけです。
どのエディタが認識されているかを「Wysiwyg profiles」メニューの「Installation Instructions」画面で確認しました。
私の環境では、Fckeditor以外にもCKEditorやmarkITUpなどが認識されていました。
以前librariesに配置していたので当たり前ですが・・・

(1)入力書式の設定

入力書式は、HTMLフィルター、Line break converter、URLフィルタを無効にしたものかFullHTMLを使用するように記載がりましたので、FullHTMLを使用するようにBetterFomatsで変更しました。

(2)エディタの設定

「Wysiwyg profiles」画面で設定をしていきます。
入力書式ごとにエディタを選択できるようになっています。すべてFckeditorを使用するように変更しました。
通常使用するのはFullHTMLなので「編集」でさらに詳細な設定を行いました。設定内容は以下のとおりです。

「Basic Setup」項目は、「Enable by default」と「Show enable/disable rich text toggle link」のみをチェックし、Interface Languageには「日本語」を選択。
「Buttons and Plugins」項目は、エディタのボタン表示に関する設定です。「wysiwyg」モジュール以下の「editors/js/fckeditor.config.js」で使用できるボタンやプラグインを発見しているようです。この項目ではそこで発見できたものが一覧になっています。とりあえず「検索」「About」「BBcode」「Autogrow」「Table:~」以外をすべてチェックしました。「Wysiwyg ImageField」モジュールを導入したあとであれば、「Wysiwyg ImageField」ボタンも表示されているのでチェックしておきます。このボタンが今回の目的です。
「Editor appearance」、「Cleanup and output」、「CSS」はデフォルトのままにしました。
※「CSS」の「Block formats」で許可するHTMLタグを登録できますが、それにはエディタ自体も対応していないと意味がありません。
試しに欄の下に記載されたすべてのタグを登録してみましたが、エディタ起動時にエラーメッセージのポップアップが4回でました。
これは「blockquote,dd,dt,code」がFckeditorで未登録(それらに関する設定がない)であるためのようです。
 

(3)画像キャッシュのプリセットの設定(Optional)

画像をリサイズする場合の設定を事前に登録しておけば、あとで利用できます。

(4)フィールドの作成

コンテンツタイプに画像アップロード用のフィールドを追加します。
既存の画像アップロード用のフィールドを使用しても良いと思いますが、どうも動作が不安定だったので新しく作り直しました。
そのときに次の手順が必要です。
①Use with Wysiwyg ImageField?をチェックする。
②FileField path settings(Optional)
   ファイルパスを指定する場合に設定します。指定にはトークンが利用できます。
③Insert
「Enable insert button」をチェックする
Enabled insert styles:の「Automatic」、「Link to file」以外で使いそうなプリセットを選択。
Default insert style:はよく使いそうなプリセットを選択
Maximum image insert width:は本文の最大幅にあわせて値を入力
④File sources
  Enabled sources:はとりあえずすべてチェックする※あとで使わないものはチェックをはずす
Autocomplete reference optionsとFile attach settingsは設定項目の意味がよくわからなかったのでデフォルトのまま。
⑤全般の設定(※重要です)
値の数:は無制限にする。
※無制限にすることで必要な数だけ画像をアップロードして貼り付けができます。
その他、必要な箇所を設定してフィールド設定を保存すればOKです。

(5)記事の投稿

実際にフィールドを作成したコンテンツタイプを使用してコンテンツを作成します。
このとき、追加したフィールドが表示されていないのであれ~と思いますが、エディタで有効にいた「Wysiwyg Imagefield」ボタンをクリックすれば、追加したフィールドが表示されます。
アップロードが終わると「insert」ボタンが現れますのでそれを使って貼り付けます。
エディタのボタンの表示順序は、ボタンとプラグインの設定メニューでチェックしたものをfckeditor.config.jsのなかでfor文を使って順番に登録しているだけなので、順番を変更することは難しいようです。

(6)エディタのカスタマイズ(optional)

wysiwygモジュールによってカスタマイズしにくくなっています。
とにかく変更したかったのが「Enter」⇒Pタグ、「Shift+Enter」⇒brタグとなるFckeditorのデフォルトです。
さきほどの、wysiwygモジュールの下にある「fckeditor.config.js」に以下を記載し変更できました。

/**
 *Custom
 */

FCKConfig.EnterMode = 'br' ;	// p | div | br
FCKConfig.ShiftEnterMode = 'p' ;	// p | div | br  
  

これで最低限のことはできましたが、GeshiProプラグインは使えないようです。
wysiwygモジュールで使用できるのはエディタの標準的なもののみのようです。

最後に使った印象ですが、画像の貼り付けが便利になったようですが、安定性とあとエディタの使い勝手が悪くなりました。
エディタでソースコードを表示させると「ぐちゃっ」と1行で表示されます。ブロック表記のところはそうでもないのかなぁ
よくわかりませんが、ソースを編集するには厄介です。
「wysiwyg」モジュール自体の話のようなのでエディタをFckeditorからTinyMCEにかえたところで関係なさそうです。
「Fckeditor」モジュールや「TinyMCE」モジュールと比較してエディタのカスタマイズの容易さで難があります。

追記

上記のエディタのカスタマイズは、モジュールの中のファイルに修正を加えているので好ましくありません。
そのうち「Wysiwyg profiles」で対応してくれそうなので、それまでの間はhookを使って対応しようと思います。
あと、ソースを表示すると1行になる件はまだ調査中です。

Drupalバージョン

Drupal 6.x