WYSIWYGエディタのCKEditor4にアップロード機能を追加する(CKEditor+KCFinder)

スポンサーリンク

はじめに

高機能なWYSIWIGエディタであるCKEditorにKCFinderを連携させて画像やファイルのアップロード機能を追加するためのまとめです。

環境

OS Windows 7 Pro 64bit
Webサーバ Apache 2.4.4 (XAMPP 5.6.12)
PHP 5.6.12 (XAMPP 5.6.12)
CKEditor Version 4.6.2

CKEditorの設定

まずはCKEditorを設定していきます。

CKEditorのインストール

CKEditorの本体を以下よりダウンロードします。

The battle-tested editor, when you need even more features and legacy compatibility.

パッケージを選ぶ必要がありますが今回はStandard Packageを選択します。

ダウンロードしたzipファイルをプロジェクトの直下に解凍します。

root
  ┗ ckeditor

CKEditorの確認

CKEditorが動くか確認するため以下のようなhtmlファイルを作成して確認します。

  root
    ┣ ckeditor
+   ┗ index.html

index.htmlの中身は以下のように書いておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CKEditor</title>
</head>
<body>
<textarea name="content" class="ckeditor"></textarea>
<script src="ckeditor/ckeditor.js"></script>
</body>
</html>

ブラウザから開いて以下のようにエディタが表示されていれば成功です。

画像の挿入

この状態で画像の挿入を選択しても以下の画像のようにファイルのアップロード機能がないため画像が追加できません。そのためKCFinderを使用してアップロード機能を追加する必要があります。

KCFinderの設定

KCFinderを設定していきます。

KCFinderのインストール

GitHubのKCFinderのページを開きます。

KCFinder web file manager. Contribute to kcfinder development by creating an account on GitHub.

右のClone or downloadからDownload ZIPを選択してダウンロードします。

ダウンロードしたzipファイルをプロジェクトの直下に解凍し、フォルダ名をkcfinderに変更しておきます。

  root
    ┣ ckeditor
+   ┣ kcfinder
    ┗ index.html

KCFinderの設定ファイルを編集する

/kcfinder/conf/config.phpの以下の部分を編集します。

-    'disabled' => true,
+    'disabled' => false,
     'uploadURL' => "upload",
-    'uploadDir' => "",
+    'uploadDir' => realpath(dirname(__FILE__)) . "/../upload/",

基本的な設定の意味は以下のようになっています。

disabled
初期設定ではKCFilderが無効になっているためfalseを設定します。
uploadURL
ファイルアップロードのメインディレクトリへのURLパス。 上記の例では、パスはKCFinderのメインディレクトリからの相対パスです。
その他の例:
/kcfinder/upload – サイトルートからの相対パス
../upload – KCFinderの親ディレクトリにある ‘upload’ディレクトリ
httр://yourdomain.com/upload – 絶対URLパス
uploadDir
KCFinderがuploadURL設定で指定されたフォルダへのローカルファイルシステムパスを自動的に検出できない場合に使用されます。KCFinderがローカルファイルシステムのパスを自動的に取得できない場合は、この設定を変更する必要があります。

CKEditorの設定ファイルを編集する

次にCKEditorの設定ファイルを編集します。画像をアップロードするにはckeditor/config.jsを開き以下の2行を追加し保存します。

  CKEDITOR.editorConfig = function( config ) {
    // 省略

+   config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?type=images';
+   config.filebrowserImageUploadUrl = '/kcfinder/upload.php?type=images';
  };

画像のアップロード

もう一度ブラウザからアクセスし画像の挿入を選択するとアップロードタグが追加され画像がアップロードできるようになります。

ファイルのアップロード設定

CKEditorのリンクでファイルをアップロードできるようにするにはckeditor/config.jsを開き以下の2行を追加し保存します。

  CKEDITOR.editorConfig = function( config ) {
    // 省略

+   config.filebrowserBrowseUrl = '/kcfinder/browse.php?type=files';
+   config.filebrowserUploadUrl = '/kcfinder/upload.php?type=files';
  };
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする