ビジュアルテキストエディッターの利用

シェアする

アメーバ―ブログや、はてなブログ等のプログサービスにて記事を投稿する際、文字の色を変えたり、画像ファイルを文章に挿入したりする機能があります。

当記事では、HTMLのTEXTAREAタグにこの機能を導入方法を説明します。

オープンソースの利用

この機能を導入するには、以下のオープンソースを使用します。

CKEditor

FCKeditorはWYSIWYGテキストエディタでWebページ上で使うことができる機能を提供しています。

KCFinder

ファイルを管理するウェブアプリケーションソフトです。

このソフトはCKFinderにファイルをアップロードする機能と連携する事ができます。

ビジュアルテキストエディッタを導入するサーバのドメインは、example.comと仮定します。

ダウンロード

以下よりCKEditor及びKCFinderをダウンロードします。

ファイルの設置

サーバのドキュメントルートvendorディレクトリを作成し、その中にダウンロ―ド及び解凍したファイルを以下のように設置します。

DocumentRoot
├ index.html
└ vendor
 ├ ckeditor
 │ ├ adapters
 │ │ ├ 省略
 │ ├ build-config.js
 │ ├ ckeditor.js
 │ ├ config.js
 │ ├ 省略
 ├ kcfinder
   ├ browse.php
   ├ config.php
   ├ 省略
DocumentRoot直下の index.html は、後ほど説明します。

 インデックスファイルの作成

ドキュメントルート直下に、index.htmlファイルを以下の内容にて作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>
<script type="text/javascript" src="vendor/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
window.onload = function(){
 var editor = CKEDITOR.replace('editor');
}
</script>
</head>
<body>
<h3>ビジュアルテキストエディッタの見本</h3>
<textarea name="content" id="editor"></textarea>
</body>
</html>

CKEditorの動作確認

http://example.com/index.html

ブラウザから上記のURLにアクセスしてCKEditorが以下のように正常に動作するか確認します。

尚、上記図の、赤枠のアイコンにて画像を選択する事ができます。

画像選択の動作確認

初期の状態では画像選択時、以下の図のように画像のURLを入力するのみの方法しかありません。

これでは、とても面倒で効率が悪いです。

次に、KCFinderをCKEditorに連携させて画像ファイルをドラック&ドロップでアップロード及び、ウェブ上にアップロードした画像ファイルを一覧から簡単に指定できるようにします。

KCfinderとの連携

CKEditor設定ファイルの編集

CKEditorをKCFinderと連携させるには、CKEditorの設定ファイルを以下のように編集する必要があります。

CKEDITOR.editorConfig = function( config ) {
  // 以下の2行を追加
  config.filebrowserImageBrowseUrl = '/vendor/kcfinder/browse.php?type=files';
  config.filebrowserImageUploadUrl = '/vendor/kcfinder/upload.php?type=files';
...以下、省略

KCFinderの設定

KCFinderは初期設定が利用できない設定になっていますので、以下のように設定を有効にします。

return array(
  // disabled の値がtrueになっている場合、falseに変更する。
    'disabled' => false,
// ...以下、省略

以上で準備は完了です。

動作確認

もう一度、ブラウザからアクセスして、画像を選択してみましょう。

URLの入力項目横に「サーバブラウザ」のボタンが表示されました。

早速押してみます。

サーバブラウザ(KCEditor)が起動しました。

試しにサブディレクトリを作成したり画像をドラッグ&ドロップしてみます。

KCFinderが正常に動作しない場合は・・・

うまく動作しない場合は以下の項目を確認してください。

・CKEditorの設定ファイルの以下の値(パス)に誤りがある。
config.filebrowserImageBrowseUrl
config.filebrowserImageUploadUrl
・KCFinderの設定ファイルの以下の値が、false になっていない
disabled