Drupal7にCKEditor をインストールした時のメモ

ゲーマーズパーク管理人です。

Drupal7にCKEditor をインストールした時のメモです。

■関連ページ

Drupal7 の各種設定

さくらインターネットに Drupal7 をインストールした時のメモ     

 

■参考サイト

http://monoid.jp/monoid7/node/5

 

■役割の違い

CKEditor

→ 文字列を選択して入力フォーム上のboldとか色を選択するだけで簡単に文字列の装飾が出来る様になって便利なモジュール。

IMCE

→ 写真とか画像を簡単にアップロード出来る様になります。

 

必要モジュールのダウンロード

IMCEモジュール

http://drupal.org/project/imce

imce-7.x-1.5.tar.gz   をダウンロードします。

※Drupal7なので 7.x-1.5 tar.gz(59.84 KB) をクリック

 

CKEditorモジュール

http://drupal.org/project/ckeditor

ckeditor-7.x-1.9.tar.gz  をダウンロードします。

※Drupal7なので 7.x-1.9 tar.gz(171.94 KB) をクリック

 

CKEditor機能本体

http://ckeditor.com/download

ckeditor_3.6.3_for_drupal_7.zip をダウンロードします。

 

CKEditor機能本体を解凍(展開)します。

実際には、ローカルで展開した物をサーバにアップロードするのは時間が掛かり過ぎて効率が良く無いので

CUI上で解凍してmvで移動させた方が効率が良いです。

なので↓の手順はあくまでも参考程度に見てください。サーバで展開 > 所定パスにmoveさせた

方が圧倒的に早いです。

ダウンロードした、CKEditor機能本体は、ZIPファイルなのでローカルにダウンロードして展開します。

CKEditor本体を解凍すると、  ckeditor というディレクトリが多重構造で存在していますが

後程説明するckeditor本体をサーバにアップする場合、次の赤太字のディレクトリのみです。

オレンジ色のディレクトリじゃないので注意!!

ckeditor_3.6.3_for_drupal_7\ckeditor  ← 解凍して出来上がったこのディレクトリ本体です。

ckeditor  ← このディレクトリの中には、  ckeditor.js / ckeditor_basic.js / ckeditor_basic_source.js / ckeditor_source.js 等が含まれています。

ckfinder

images

includes

plugins

changelog.html

・・・etc

混同してしまい、分かり辛いので名前を変えれば良いのにと思います。

 

サーバ上の下記パスに libraries ディレクトリを作成します。

/home/{user_name}/www/{sub_domain}/drupal/sites/all/libraries

mkdirで作っても良いですが今回は、WinSCPを使って直接ディレクトリを作成しました。

※デフォルトでは、
/home/{user_name}/www/{sub_domain}/drupal/sites/all/ 

までしかディレクトリはありません。

 

サーバ上にCKEditor本体をアップし解凍します。

/home/{user_name}/www/{sub_domain}/drupal/

ここにWinSCPで

ckeditor_3.6.3_for_drupal_7.zip  を丸ごとアップします。

 /home/{user_name}/www/{sub_domain}/drupal/ckeditor_3.6.3_for_drupal_7.zip

こんな感じ。

解凍(展開)します。

%unzip ckeditor_3.6.3_for_drupal_7.zip

展開したCKEditor本体を移動させます。

mv /home/{user_name}/www/{sub_domain}/ckeditor /home/{user_name}/www/{sub_domain}/drupal/sites/all/libraries/ckeditor

 

モジュールのアップロードを行う。

IMCEモジュールのアップロードを行います。

Modules > Upload a module or theme archive to install > 参照

C:\Users\{user_name}\Desktop\imce-7.x-1.5.tar.gz

Install

 

CKEditorモジュールのアップロードを行います。

Modules > Upload a module or theme archive to install > 参照

C:\Users\{user_name}\Desktop\ckeditor-7.x-1.9.tar.gz

Install

 

追加したモジュールを有効にします。

以下2つにチェックを入れて、 Save configuration を押します。

Modules > MEDIA > IMCE
Modules > USER INTERFACE > CKEditor

 

最後の仕上げで、CKEditorを使える様にし、ファイルのアップロードも行える様にします。

Module > CKEditor Configure

@Advanced
Profile > Advanced > edit
File browser setting > File browser type (Link dialog window) より
IMCE を選択 > Save

@Full
Profile > Full > edit
File browser setting > File browser type (Link dialog window) より
IMCE を選択 > Save

 

画像ファイルをアップロードしてもサイト上で画像が見えない場合

原因としては、次の.htaccess が原因でした。

この.htaccess をリネーム等して認識されない様にしたところ

正常に画像が表示される様になりました。

ただし、画像は表示される様になったものの

IMCEでファイルのアイコンをクリックした時に、Google Crome上ではイメージプロパティUIは起動するものの

サーバーブラウザー というボタンを押しても何も反応が無くなりました。

根本的な解決はまだ出来ていません。

と思って調べていたら海外のサイトでバグである事が明記されてました。

http://drupal.org/node/1511484

Google Crome 20.0.1132.57 m上ではこの不具合が発生します。

IE9だと正常に動作しています。画像の投稿したりする場合にはCromeは使わない事をお勧めします。

/home/{user_name}/www/{sub_domain}/drupal/sites/default/files/
.htaccess

次の様に画像が格納されているのですが

/home/{user_name}/www/{sub_domain}/drupal/sites/default/files/pictures
hoge_1.jpg
hoge_2.jpg

この部分の.htaccessのせいで画像の表示がされていませんでした。
/home/{user_name}/www/{sub_domain}/drupal/sites/default/files/
.htaccess

  1 SetHandler Drupal_Security_Do_Not_Remove_See_SA_2006_006
  2 Options None
  3 Options +FollowSymLinks

いまいちこの.htaccessの設定が分かりませんが
.htaccess を削除( .htaccess_back_up とりネーム)したところ
正常に画像が認識される様になりました。

 

CKEditorを折角インストールしたのに、編集フォームにてフォーンと選択が出来ない場合

Body(Edit summary)の下あたりに

Switch to plain text editor

という項目があるので、そこの 

Text format を Full HTML に設定します。

するとBody部分に文字列を装飾する為のアイコンが表示される様になります。

また、画像をDrupal7でサーバに画像をアップロードしたにも関わらず

画像がページ上に表示されない場合、こちらも Full HTML にすれば直ります。

 

画像をコンテンツに挿入するには?

Body(Edit summary) 状態にします。

入力エリアの右上に写真のアイコンがあるのでそれをクリックします。

イメージプロパティ ダイアログが起動したら

サーバーブラウザーをクリックします。

Navigation < root > pictures とある部分の左上にある

Uploadをクリックします。

参照...をクリックし、ローカルの画像を選択します。

選択が終わったら Upload ボタンを押します。

画面右側に、 File name↓ という箇所にサーバにアップロード済の画像一覧が

表示されるので、その中からコンテンツに挿入したい画像を選択し

メニューより Insert file をクリックします。

イメージプロパティダイアログ画面に戻ったら

必要に応じて

高さ

ボーダー

横間隔

縦間隔

行揃え

とかあるので必要に応じて入力を行います。

全て設定が終わったらOKボタンを押せば画像が挿入されます。

Text format が Full HTML になっている必要があります。