増子良太のブログです

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

簡単!ckeditorのconfigのイジリ方

      2016/01/28

おはようございます!rmascoです。

ckeditorって何がすごいの?って聞かれて、
私が一番最初にあげたいのがカスタマイズのしやすさでしょう。

しかもカスタマイズといっても、プログラムをいじるなど難しい知識がいるものではなく、
configファイルで設定を変更するだけである程度のことはできてしまうことにあります。

そこで、本日からはckeditorの設定について解説していきたいと思います。
本家のサイトは英語のため、一部おかしいところなどあるかもしれませんが、
その際には指摘していただけると助かります。

まず、ckeditorのconfigAPIを見てみましょう
CKEDITOR.config
嫌になるくらいありますね。。。
私が以前使用したことあるものをご紹介していきたいと思います。

数が多いため、とりあえず10この設定をご紹介したいと思います。

  • baseHref
    コンテンツ内の基本となるURLを指定します。<base>タグをコンテンツ内に適用するといったところでしょうか。
    ただ、こちらを設定しても読み込み順の問題なのか、一部JSのエラーが発生します。画像などは表示されますが。。。
  • contentsCss
    コンテンツ内に読み込むCSSファイルを指定します。
    見たまま編集をより表示される見た目に近づけたい場合などに、実際のCSSを読み込みます。
  • entities
    HTMLに出力する歳に実体参照に変換するかどうかを指定します。
    XMLパーサなどでHTMLを解析する場合はfalseにし、実体参照に変更しなくもできます。ただし<や>はこの設定に関係なく変更されます。
  • coreStyles_bold
    太字のボタンを押した時に出力されるHTMLを変更します。
    太字をstrongタグにしたくない場合は下記のようなHTMLを出力するよう変更もできます。
    ■設定

    ■出力
  • coreStyles_italic
    斜体のボタンを押した時に出力されるHTMLを変更します。
    斜体をemタグにしたくない場合には下記のようなHTMLを出力するよう変更もできます。
    ■設定

    ■出力
  • coreStyles_strike
    取り消し線のボタンを押した時に出力されるHTMLを変更します。
    取り消し線をstrikeタグにしたくない場合には下記のようなHTMLを出力するよう変更もできます。
    ■設定

    ■出力
  • coreStyles_subscript
    添字のボタンを押した時に出力されるHTMLを変更します。
    添字をsubタグにしたくない場合には下記のようなHTMLを出力するよう変更もできます。
    ■設定

    ■出力
  • coreStyles_superscript
    上付き文字のボタンを押した時に出力されるHTMLを変更します。
    上付き文字をsupタグにしたくない場合には下記のようなHTMLを出力するよう変更もできます。
    ■設定

    ■出力
  • coreStyles_underline
    下線のボタンを押した時に出力されるHTMLを変更します。
    下線をuタグにしたくない場合には下記のようなHTMLを出力するよう変更もできます。
    ■設定

    ■出力
  • customConfig
    設定ファイルを独自に変更したものを読み込みます。ckeditor内にあるconfig.jsは変更してしまうと、
    ckeditor自体にアップデートが合った場合、単純に上書きしてアップデートという流れが簡単かと思います。
    そんな時に、configファイルだけ独自に作成したものを別のファイルとして、別のディレクトリにおいておき、
    この設定で読込先さえ指定してあれば、ckeditorないが上書きされてもプログラムには問題ありません。
今回だけでかなり息切れ状態ですが、
次回も設定例をご紹介していきたいと思います。

 - ckeditor