ckeditorとは？

このブログではckeditorをカスタマイズすることを目標に、
少しずつ進んで行こうと思います。
ただ、いきなりカスタマイズでは飛ばしすぎかなと思いましたので、
まずは導入編。初歩の初歩。千里の道も一歩から。

まず、ckeditorとは。
WYSIWYG※1の一種で、ワードのような操作でHTMLが記述できるツールです。
※1What You See Is What You Get（見たままが得られる）

ここで私は簡単にとは言いません。
だってワードだって難しいもの！
慣れれば楽☆ってことですね。

ちなみにWYSIYWGと呼ばれるものがいくつかあります。
たぶん一番有名なのがTinyMCE。
だけど、重たい気がする。表示するまでに時間がかかる。。。



そういう意味でもckeditorは軽くてサクサク！ただし、1枚のHTMLで複数使うと、
それなりに重たくなりなるので注意です。

ではさっそく使ってみましょう。
まずckeditorのサイトにアクセスします。
ckeditor

サイトの右上にある「Download」をクリックし、ダウンロード画面を表示します。

次にckeditorの「Download zip」か「Download tar.gz」ボタンをクリックして、ダウンロードします。

ダウンロードしたファイルを解凍し、その中の「sample」というフォルダの中にあるindex.htmlをブラウザで開きます。

表示すると、下記のような画面が表示されるかと思います。

英語なので、なんとなくな訳です。

• Replace Textarea Elements by Class Name
  読んでそのとおり、class名に"ckeditor"と指定するだけで起動するできるというサンプルです。
  通常はJSを読み込むだけではなく、textereaを指定して、.replace()などを呼び出さないとckeditorは起動しませんが、このサンプルはclass="ckeditor"と指定するだけで、ckeditorが起動することを教えてくれています。
  なのでコードは下記のようにすっきりします(というかHTMLだけ)
  
  

  <textarea class="ckeditor">sample</textarea>
  

• Replace textarea elements by code
  こちらはテキストエリアのIDを指定してでckeditorを起動します
  

  CKEDITOR.replace( 'editor1' );
  

• Full Page Editing with Document Properties Plugin
  最近追加されたようで自信がないのですが、<html>〜</html>までを文章として扱えるようになるみたいです。

こんな感じで、サーバーなどがなくても簡単にサンプルを実行して試して見ることができます。

次回はいよいよサンプルをコピーして、変更してみます。