ckeditorカスタムノート

ckeditor設定解説〜パート1〜

2012-03-19T07:45:00.000+09:00

おはようございます！rmascoです。
このckeditorカスタムノートではckeditorのカスタマイズについて、
のんびりマイペースで書いていこうと思っております。

ckeditorって何がすごいの？って聞かれて、
私が一番最初にあげたいのがカスタマイズのしやすさでしょう。
しかもカスタマイズといっても、プログラムをいじるなど難しい知識がいるものではなく、
設定を変更するだけである程度のことはできてしまうことにあります。

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

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

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

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

```
coreStyles_italic
斜体のボタンを押した時に出力されるHTMLを変更します。
斜体をemタグにしたくない場合には下記のようなHTMLを出力するよう変更もできます。
■設定
```
CKEDITOR.config.coreStyles_italic =
 {
 element : 'span',
 attributes : { 'class' : 'Italic' }
 };
```
■出力
```

```
coreStyles_strike
取り消し線のボタンを押した時に出力されるHTMLを変更します。
取り消し線をstrikeタグにしたくない場合には下記のようなHTMLを出力するよう変更もできます。
■設定
```
CKEDITOR.config.coreStyles_italic =
 {
 element : 'span',
 styles : { 'text-decoration' : 'line-through' }
 };
```
■出力
```

```
coreStyles_subscript
添字のボタンを押した時に出力されるHTMLを変更します。
添字をsubタグにしたくない場合には下記のようなHTMLを出力するよう変更もできます。
■設定
```
CKEDITOR.config.coreStyles_subscript =
 {
 element : 'span',
 attributes : { 'class' : 'Subscript' },
 overrides : 'sub'
 };
```
■出力
```

```
coreStyles_superscript
上付き文字のボタンを押した時に出力されるHTMLを変更します。
上付き文字をsupタグにしたくない場合には下記のようなHTMLを出力するよう変更もできます。
■設定
```
CKEDITOR.config.coreStyles_superscript =
 {
 element : 'span',
 attributes : { 'class' : 'Superscript' },
 overrides : 'sup'
 };
```
■出力
```

```
coreStyles_underline
下線のボタンを押した時に出力されるHTMLを変更します。
下線をuタグにしたくない場合には下記のようなHTMLを出力するよう変更もできます。
■設定
```
CKEDITOR.config.coreStyles_superscript =
 {
 element : 'span',
 styles : {'text-decoration' : 'underline' }
 };
```
■出力
```

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

今回だけでかなり息切れ状態ですが、
次回も設定例をご紹介していきたいと思います。

ckeditorとは？

2012-03-13T02:07:00.001+09:00

このブログでは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>までを文章として扱えるようになるみたいです。

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

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

ckeditorカスタムノート始めました

2012-03-12T07:38:00.006+09:00

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

今まで怠け者が頑張るブログで記事を書いていましたが、
一つ書きたいテーマが決まったので、ブログを分けました！

その名も
「ckeditorカスタムノート」

お気づきの皆様もいらっしゃると思いますが、
ネーミングセンスはございません(笑)

このブログでは、ckeditorという便利なツールを、
もっと便利に活用しよう！
日本語の情報さえあれば・・・もっと活用できるのでは！？
という思いで始めました。

ckeditorは通常使うだけでもすごく便利なツールだと思います。
ただ、ckeditorの本当の凄さはカスタマイズのしやすさかなと思っています。
通常はソースに手を入れないと変更できない部分など、
ckeditorでは設定ファイルを変更するだけで簡単にできてしまうのです。
その変更にJavaScriptの知識はほとんどいりません。
こんなもんかなと思いながら、コピーすれば使えてしまいます。

ただ、やはり日本語の情報がなくて、私自身もかなり苦戦しました。
今までの経験で得た知識を、このブログでまとめていければなと思っています。

このブログがお役に立てるよう頑張ります！
よろしくお願いします。

過去にckeditorカスタマイズに関して書いた記事(怠け者が頑張るブログ)