ckeditor | umbrella_process blog

オープンソースで高機能、日本語完全対応なWYSIWYGエディタ「CKEditor」を導入する機会があったので、インストール方法をメモっときます。

CKEditorのデータをダウンロード

公式サイトからダウンロードします。

アップロードする位置は任意です。ここでは、ルートディレクトリ上に「ckeditor」フォルダを作ってアップロードするとして解説を進めます。

設定ファイルは「/ckeditor/config.js」になります。こちらを必要に応じて修正します。言語設定を日本語にすればとりあえず使えます。

config.language = 'ja';

まず、ckfinderのJavascriptファイルを読み込みます。

<!-- <head>タグ内に記述 -->
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

次に、CKFinderを起動。WYSIWYGエディタを導入したいtextareaのidが「editor」の場合、以下の様に記述すればOK。

<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor' );
</script>

以上。…のはず。
カンタンすぎてわざわざブログに書くことも無かったかもしれん…

CKEditorがかなり便利。かなり使いやすいWYSIWYGエディタで、導入も驚くほどカンタン。インストール方法もまとめておきたいが、詰まった点があったのでメモ。

CKEditorにもネイティブでプレビュー機能があるのだが、当然エディタで編集している範囲しかプレビューされない。エディタが入っている以外のinputタグの内容などもあわせた「編集内容をプレビュー」機能を持たせたければ、エディタから編集中のデータを取り出さなければならないので、その方法です。

// 「editor1」が、CKEditorに置き換えたtextareaを差すので、環境に合わせ変えてください。
data = CKEDITOR.instances.editor1.getData();
alert(data);

CKEditor自体も、formをsubmitする際にエディタ部分のデータを取得してtextareaのvalueに突っ込んでいるみたい。