Wysiwyg Imagefieldモジュール

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

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

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

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

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に配置していたので当たり前ですが・・・

（１）入力書式の設定

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

（２）エディタの設定

「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タグを登録できますが、それにはエディタ自体も対応していないと意味がありません。
試しに欄の下に記載されたすべてのタグを登録してみましたが、エディタ起動時にエラーメッセージのポップアップが４回でました。
これは「blockquote,dd,dt,code」がFckeditorで未登録（それらに関する設定がない）であるためのようです。
 

（３）画像キャッシュのプリセットの設定（Optional）

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

（４）フィールドの作成

コンテンツタイプに画像アップロード用のフィールドを追加します。
既存の画像アップロード用のフィールドを使用しても良いと思いますが、どうも動作が不安定だったので新しく作り直しました。
そのときに次の手順が必要です。
①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です。

（５）記事の投稿

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

（６）エディタのカスタマイズ（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モジュールで使用できるのはエディタの標準的なもののみのようです。

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

追記

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