高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]

CKEditor は、高機能でありながらもカスタマイズも可能で、ブログの書き込み画面のようなボタンによる編集を容易に実現できるWYSIWYGエディタです。

デモページも同サイト内に公開されています。

WYSIWYGエディタは、数々公開されていたりしますがあまりにも多機能すぎるとアプリに適用した際に、ユーザーが使いこなせなかったり、複雑すぎるところからサポートが返って面倒になったりもします。

なので、提供される機能からさらに一部を公開したり、アプリの画面要件に沿ってうまく組み込めたり出来るものが無いかを探しているときに見つけました。

しかも日本語に対応してくれていますので、ボタンの説明（alt属性）がちゃんと日本語で表示されます。

また、フォーム要素（テキストボックスやラジオボタン、チェックボックスなど）を埋め込む機能もあるため、カスタマイズ次第ではCMSのアプリを作ることも可能かもしれません。

ライセンスは、オープンソースライセンスで利用するものに関して（個人や社内で利用する場合など）はフリーで利用可能、コマーシャルライセンスで利用する場合（CKEditorをネットに公開しているページや製品に組み込む場合など）は、別途ライセンス料を支払わなければなりません。

CKEditorのインストールと設置

インストール方法は、ソースをダウンロード後にドキュメントルートの適当な場所に展開するだけで利用可能です。

サンプル用のスクリプトが（_samples/）に格納されているので、まずはそちらにアクセスしてみるのがよいかと思います。

- /ckeditor/_samples/index.html

実際にアプリを動かす環境では、上記の_samplesディレクトリやインストール方法が記載されたファイル（INSTALL.html）、ライセンスに関するファイル（LICENSE.html）、チェンジログに関するファイル（CHANGES.html）などは削除しておきましょう。

サンプルのスクリプトをベースにして、CKEditorを組み込んでみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Replace Textareas by Class Name - CKEditor Sample</title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
<body>
  <h1>CKEditor Sample</h1>
<div id="alerts">
<noscript>
  <p>
    <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
    support, like yours, you should still see the contents (HTML data) and you should
    be able to edit it normally, without a rich editor interface.
  </p>
</noscript>
</div>
<form action="posteddata.php" method="post">
  <p>
    <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>
</body>
</html>

この状態で見てみると、こんな感じに表示されます。

- 初期画面のイメージ

CKEditorをカスタマイズする - 不要なボタンの削除 -

カスタマイズ用に、インストール後のディレクトリにはconfig.jsというファイルが含まれているのですが、ここで記載した内容はckeditorを利用する全てのアプリケーションに適用されるので、個別に利用するHTMLファイルごとに設定を追加して行くやり方を取ります。

まずは、あまりに機能が多いとユーザーも返ってわかりづらいため、多機能なボタンを減らすカスタマイズをして見ます。

ckeditor.jsを読み込んでいるすぐ下に、下記のようにscriptタグで表示したいボタン名を指定します。

下記は、フルバージョンで利用したい場合です

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.config.toolbar = [
['Source','-','Save','NewPage','Preview','-','Templates']
,['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker']
,['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat']
,['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField']
,'/'
,['Bold','Italic','Underline','Strike','-','Subscript','Superscript']
,['NumberedList','BulletedList','-','Outdent','Indent','Blockquote']
,['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
,['Link','Unlink','Anchor']
,['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak']
,'/'
,['Styles','Format','Font','FontSize']
,['TextColor','BGColor']
,['ShowBlocks']
];
</script>

なんとなくわかると思いますが、ボタンの識別子が羅列しているので、ここから表示したいものを残して不要なものを削除していきます。

[]のブロックまたは「-」を入れると、同じボタンを囲む枠内に表示され、「/」を入れるとその位置でボタンの枠がページ内で折り返す仕様になります。

今回消すのは、

・ソースの表示（Source）

・保存（Save）

・新しいページ（NewPage）

・プレビュー（Preview）

・テンプレート（Templates）

・ワード文章から貼り付け（PasteFromWord）

・印刷（Print）

・スペルチェック（SpellChecker）

・検索（Find）

・置換（Replace）

・フォーム（Form）

・チェックボックス（Checkbox）

・ラジオボタン（Radio）

・テキストボックス（TextField）

・テキストエリア（Textarea）

・選択フィールド（Select）

・ボタン（Button）

・画像ボタン（ImageButton）

・不可視フィールド（HiddenField）

・ブロック引用（Blockquote）

・アンカー挿入/編集（Anchor）

・ Flash挿入（Flash）
・絵文字（Smiley）

・改ページ挿入（PageBreak）

・スタイル（Styles）

・フォント（Font）

随分と消しますが、ブログの入力フォームのようなアプリを作りたい場合は、不要かなと。

保存やプレビューはCKEditorの機能を使わなくても代替は作れると思いますし。

編集後のソースは、下記のようになります。

<script type="text/javascript">
CKEDITOR.config.toolbar = [
['Cut','Copy','Paste','PasteText']
,['Undo','Redo','-','SelectAll','RemoveFormat']
,['Bold','Italic','Underline','Strike','-','Subscript','Superscript']
,['NumberedList','BulletedList','-','Outdent','Indent']
,['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
,['Link','Unlink']
,['Image','Table','HorizontalRule','SpecialChar']
,'/'
,['Format','FontSize']
,['TextColor','BGColor']
,['ShowBlocks']
];
</script>

上記のスクリプトを組み込むと、下記のように画面が随分とシンプルになります。

- ボタンをなくしてシンプルにカスタマイズ

CKEditorをカスタマイズする - テキストエリアの名前、リサイズ、高さ・幅の設定 -

テキストエリアの名前（name属性）とidは自由に設定可能です。

ただし、クラス名は「ckeditor」としておく必要があります。

<textarea class="ckeditor" cols="80" id="blog" name="blog" rows="10"></textarea>

デフォルトだと、テキストエリアは画面の大きさに合わせて伸縮し、またその中でユーザーが自由にリサイズできるようになっています。

これを禁止するには、ボタンの削除のときと同様に独自のscript内に下記のように定義しておきます。

<script type="text/javascript">
// テキストエリアのリサイズ不許可
CKEDITOR.config.resize_enabled = false;
</script>

テキストエリアのリサイズを禁止した場合、一定の幅や高さに設定しておきたい場合もあると思いますが、下記のように設定することで対応できます。

<script type="text/javascript">
// テキストエリアの幅
CKEDITOR.config.width  = '800px';
// テキストエリアの高さ
CKEDITOR.config.height = '300px';
</script>

また、リサイズを許可しておく場合、テキストエリアの最小の幅・高さ、最大の幅・高さを設定することも可能です。

<script type="text/javascript">
// 幅の最大値
CKEDITOR.config.resize_maxWidth  = 800;
// 幅の最小値
CKEDITOR.config.resize_minWidth  = 200;
// 高さの最大値
CKEDITOR.config.resize_maxHeight = 300;
// 高さの最小値
CKEDITOR.config.resize_minHeight = 200;
</script>

その他、CKEditorには細かなカスタマイズが可能です。

詳細は、ドキュメントページに記載されています。

CKEditorを組み込んだアプリケーションを作ってみる

これだけ高機能なエディタ機能を搭載しているので、簡単なブログシステムであれば構築可能です。

ここでは、入力フォームにCKEditorを組み込み、それを保存（今回はサーバー上のファイルに）する簡単なアプリケーション（PHP）を作ってみます。

確認画面や登録完了画面などは面倒なので今回は省略。

1ファイルのみで動作するようにしています。

<?php

// タイトルと本文を保存するファイルのパス
$title_file_path    = "/path/to/title.txt";
$contents_file_path = "/path/to/contents.txt";

if (!empty($_POST['action']) && $_POST['action'] === "put") {
    if ($_POST['contents'] !== "" && $_POST['title'] !== "") {
        $fp = fopen($title_file_path, "w");
        fwrite($fp, htmlspecialchars($_POST['title']));
        fclose($fp);
        $fp = fopen($contents_file_path, "w");
        fwrite($fp, htmlspecialchars($_POST['contents']));
        fclose($fp);
    } else {
        echo "Error!";
        exit;
    }
}

// タイトル用ファイルがあれば内容を取得
if (file_exists($title_file_path)) {
    $title = file_get_contents($title_file_path);
} else {
    $title = "";
}

// 本文用ファイルがあれば内容を取得
if (file_exists($contents_file_path)) {
    $contents = file_get_contents($contents_file_path);
} else {
    $contents = "";
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Replace Textareas by Class Name - CKEditor Sample</title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
CKEDITOR.config.toolbar = [
['Cut','Copy','Paste','PasteText']
,['Undo','Redo','-','SelectAll','RemoveFormat']
,['Bold','Italic','Underline','Strike','-','Subscript','Superscript']
,['NumberedList','BulletedList','-','Outdent','Indent']
,['Link','Unlink']
,'/'
,['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
,['Image','Table','HorizontalRule','SpecialChar']
,['Format','FontSize']
,['TextColor','BGColor']
,['ShowBlocks']
];
// テキストエリアの幅
CKEDITOR.config.width  = '600px';
// テキストエリアの高さ
CKEDITOR.config.height = '300px';
// テキストエリアのリサイズ不許可
CKEDITOR.config.resize_enabled = false;
    </script>
</head>
<body>
    <h1>
        My Blog System
    </h1>
<div id="alerts">
<noscript>
  <p>
    <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
    support, like yours, you should still see the contents (HTML data) and you should
    be able to edit it normally, without a rich editor interface.
  </p>
</noscript>
</div>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
  <p>
  <input type="text" name="title" value="<?php echo $title; ?>" size="95" />
  </p>
  <p>
    <textarea class="ckeditor" cols="80" id="contents" name="contents" rows="10"><?php echo $contents; ?></textarea>
  </p>
  <p>
    <input type="submit" value="Submit" />

    <input type="hidden" name="action" value="put" />
  </p>
</form>
</body>
</html>

データは、HTMLタグがそのまま送られてくるため、フォームデータのHTMLタグをエスケープして保存、対象ファイルがあったら読み込んで、それをテキストボックスとテキストエリアにセットすると言うだけのものです。

- 表示イメージ