増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

ckeditorとは?

      2013/06/28

こんばんは!rmascoです。

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

まず、ckeditorとは

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

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

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

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

ckeditorを使ってみよう

まず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だけ)

  • Replace textarea elements by code
    こちらはテキストエリアのIDを指定してでckeditorを起動します
  • Full Page Editing with Document Properties Plugin
    最近追加されたようで自信がないのですが、<html>〜</html>までを文章として扱えるようになるみたいです。
 
こんな感じで、サーバーなどがなくても簡単にサンプルを実行して試して見ることができます。
次回はいよいよサンプルをコピーして、変更してみます。

 - ckeditor