ブラウザ上で動くエディター CKEditor

 ブラウザ上で動くテキストエディター(CKEditor)の紹介です。CKEditorは、ブラウザのテキストエリア内で動くエディターです。主に、文字の色、フォントサイズ、リンク先の設定などを視覚的に変更することができます。また、日本語も対応してます。今回は、CKEditorの設置方法の紹介です。

設置イメージ
CKEditorの紹介

1. ダウンロード
 下記のサイトからダウンロードしてください。ダウンロードするとき、「Basic」「Standard」「Full」の3種類がるので、目的に合わせてダウンロードしてください。今回は、フォントカラーの変更ができるようにしたかったので、「Full」をダウンロードしました。
http://ckeditor.com/download

2. 設置
ダウンロードしたファイルを解凍して、フォルダーを設定します。そして、「ckeditor.js」を読み込み、エディターを設置したいtextareaにclass(ckeditor)を設置すると完了です。textareaのサイズは、cssで設定してください。

CKEditor 設置方法

javascript ファイルの読み込み
<script src=”./ckeditor/ckeditor.js” type=”text/javascript”></script>

テキストエリアの設定
<textarea class=”ckeditor”></textarea>

CKEditor以外の紹介
Nic Edit
TinyMCE
Cross-Browser Rich Text Editor
Yahoo! recommends YUI

(ボヤキ・・
 エディターを設置するにあたって、何種類か別のを試したのですが、細かい不具合がありました。例えば、ブラウザのバージョンによっては、上手く動かない。背景色を変更するとエディターの文字が消えてしまう。設置する階層によってエディターのアイコンが表示されない。等の不具合がありました。皆さんも、エディターを選択するときは、注意してくださいね。

Be the first to comment on "ブラウザ上で動くエディター CKEditor"

Leave a comment