[HTML] リッチなWYSIWYGエディタ「CKEditor」

WYSIWYGエディタ「CKEditor」を使えばとってもリッチなテキスト編集ができます。

どれくらいリッチかと言うとこれくらい。

  • Basic Package
    CKEditorBasic

  • Standard Package
    CKEditorStandard

  • Full Package
    CKEditorFull

Full Package なんてもうリッチすぎてむしろ使いにくそうなくらいです。

では、HTMLページのテキスト入力(textarea)で、リッチなテキスト編集を可能にする CKEditor を使ってみます。

CKEditor を表示

  1. CKEditor ダウンロード から、使用したい Package の script タグをコピってHTMLに貼り付けます。

  2. HTML の textarea の class に “ckeditor” を追加します。
    CKEditor は id で要素を制御するので、適当な id を設定しておきます。

これでリッチなテキスト編集ができる textarea に変身!超簡単!

CKEditor から値を取得

  1. CKEditor のインスタンスは CKEDITOR.instances に入っています。
    この連想配列から設定した ID のインスタンスを取得して操作します。

  2. getData() で入力した値を取得します。

サンプルなので、解りやすく 1. と 2. を別々に書いていますが、普通はこう書きますかね。

CKEDITOR.instances.ckeditorArea.getData()

取得も簡単!これだけでリッチなテキストを使えるなんて素晴らしいですね!

 

しかし実のところ、私が欲しているのはこんな素晴らしくリッチなテキストではく、色とサイズと太字が設定できるだけの貧相なテキスト編集なんですけど、そっちは CKEditor ドキュメント がわかりにくくて苦労してしまいました。

長くなるので、貧相にする方法と、イベントを受ける方法を別記事で書きます。
今回は表示とデータ取得まで。

まーや
About まーや (34 Articles)
画像変換サービスPictureFitterを担当しています。 ネコ大好きのアンドロイダーです。
Contact: Twitter

Leave a comment

Your email address will not be published.

*



Top