CKEditorいいで
どうもこんにちは福本です。
今日は、今週から使い始めたwysiwyg界で有名なCKEditorのレビューと簡単な使い方です。
最終的には、今後デコメール送信用にカスタマイズしたいと考えています。その第一弾です。
いやーいいですね、これは。本当に手軽です。しかも軽い。
PCを対象として使うには申し分ないのではないでしょうか。
しかし、ここは「携帯サイトをつくろう」ですから、
僕は現在、携帯へHTMLメールを送るためのリッチテキストエディターとして、
CKEditorをカスタマイズをしている途中です。
色々使い勝手に感動することもあったり、一筋縄なじゃいかないこともあったりと、
前途多難なエディターですが今後どっぷりと浸かってみたいみたいと思います。
CKEditorを始めて使う方へ
まず普通の使い方なんですが、
これは本当に簡単で、まず本家サイトから本体をダウンロードしてきます。
ダウンロードされましたら、解凍してckeditorフォルダを公開ディレクトリにアップロードして下さい。
サーバーで直接.tar.gzファイルをダウンロード、解凍でも同じことです。
アップロードされましたら、/ckeditor/_samplesをブラウザで開いて下さい。
index.htmlを自動的に開き、以下の画像の様に10個程のリンクがあるページが見れていますか？
見れましたらとりあえずリンクをクリックすると、早速サンプルで試してもらえると思います。
すごいでしょ！こんな手軽に使えるんですよ！
自作のWEBアプリケーションに導入する方法
では次に自作のWEBアプリケーションに導入する方法です。これもまた簡単。
ckeditor.jsを置いているディレクトリを指定したスクリプトタグを、
CKEditorを設置したいページに書きます。
<script type="text/javascript" src="ckeditor.js"></script>
次に、テキストエリアを用意して下さい。
そのテキストエリアのクラスに「ckeditor」を指定します。
<textarea class="ckeditor" cols="30" id="editor1" name="editor1" rows="10"></textarea>
さぁここまでで一度ブラウザで見てみましょう。
上の画像のようなエディターが見れてますか？
見れてない人はclassの名前やスクリプトタグのパスをもう一度確かめて下さい。
これで基本的に使えます！カスタマイズも自由自在。
カスタマイズの仕方は後ほど書きますが、とりあえず以下の様なテキストを書いて、
フォームでサブミットしたものをダンプしてみました。
["editor"]=> string(198) "<div> test</div> <div> <span style="font-size: 18px;">test<br /> </span></div> <div> <span style="color: rgb(255, 0, 0);"><span style="font-size: 18px;">test</span><br /> </span></div> "
はいもうそのままHTMLで送られてくるんですよ！
これは使い道が広がりますね！
CKEditorのカスタマイズ
CKEditorはカスタマイズも簡単。公開ディレクトリにアップした中にconfig.jsがあると思います。
ディレクトリで書くと/ckeditor/config.jsです。
基本的にはこのファイルの中に設定を書き込んでいくのですが、
バージョンアップした時にめんどくさいことになりそうなので、
configの機能のcustomConfigという機能を使ってファイルを分けます。
またconfig.js以外のファイルに直接書き込んで変更しようとするのは無謀です。
というのもckeditor.jsとかそれ以外のファイルは、改行が一切ないので読むのにすごい苦労するのです。
このconfig.jsだけでやりたいことのほとんどは完結できるからいらんとこ触るなって感じですかね。
設定内容はお好みですが、やはり不必要なツールバーを消したい人がほとんどではないでしょうか。
/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};
初期状態のconfig.jsは、以上のことしか書かれてありません。
これをコピペしてmyconfig.js（ファイル名は自由）を作成して下さい。
そしてそちらにほぼすべての設定を書き込みます。
その前に自作ファイルを読み込むための設定だけ、config.jsに書き込みましょう。
コメントアウトの下くらいに以下の記述を書いておけばいいかな。
config.customConfig = '/myconfig.js';
これでオッケーです。あとは、myconfig.jsに設定を書き込んでいきます。
先ほどの上の画像のような携帯っぽい状態にするには、以下の様に設定すればできます。
/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
//Define changes to default configuration here. For example:
config.language = 'ja';
//config.uiColor = '#AADC6E';
config.toolbar =
[
['Source'],
['Cut','Copy','Paste'],
['Link','Unlink'],
'/',
['JustifyLeft','JustifyCenter','JustifyRight','HorizontalRule'],
['Bold','Italic','Underline','Strike'],
'/',
['Undo','Redo','-','Find','Replace','SelectAll'],
['Outdent','Indent','SpecialChar'],
'/',
['TextColor','BGColor'],
['FontSize','-','Image','-','Smiley',]
];
config.width = '240px';
config.height = '300px';
config.resize_enabled = false;
config.enterMode = CKEDITOR.ENTER_DIV;
config.shiftEnterMode = CKEDITOR.ENTER_DIV;
// This is actually the default value.
config.keystrokes =
[
[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ],
[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ],
[ CKEDITOR.CTRL + 76 /*L*/, 'link' ],
[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ],
[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ],
[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ]
];
config.smiley_path = '/emoji/';
config.smiley_images = ['emoji1.gif','emoji2.gif'];
};
上から説明していくと、まず言語の設定。とりあえず「ja」にしておけば間違いないかと。
次はスキンの色はコメントアウトをしてままで、早速ツールバーの設定です。
「/」までが１列で、「[]」を分けるか、「-」を入れることで列の中でブロックを分けることができます。
不必要なものはどんどん外していきましょう。
次にwysiwygの横幅と縦幅です。これは携帯にHTMLを送信することを想定しているので、
横幅は240pxの縦幅は適当です。
その次のresize_enabledは右下にドラッグするとリサイズできるというものなのですが、
そんな必要はありませんので、false。
enterModeは改行時のタグをどうするかです。pタグかbrタグかdivタグかを選べます。
基本的には、以下の様にBRで良いと思います。
config.enterMode = CKEDITOR.ENTER_BR;
しかし、携帯に送るときは改行はDIVの方が確実なので、ここではDIVを選択しています。
残りの設定は、wysiwyg内でのショートカットキーの設定ですね。見たままです。
とりあえずこれで見た目だけは整うかなと。
あっそうやそうや、絵文字とかも使えますよ。
config.smiley_path = '/emoji/'; config.smiley_images = ['emoji1.gif','emoji2.gif'];
上記の様に、まずsmiley_pathに絵文字ディレクトリを指定してあげましょう。
デフォルトでは変な絵文字が入っているディレクトリが指定されています。
次にsmiley_imagesの中に、上で指定したディレクトリに入っているファイルを書いてあげます。
すると、スマイリーボタンを押すと絵文字がズラズラーと並ぶことになります。
まだまだ他にも色んな使い方ができるので、調べて下さい。
一応ドキュメントをあげておきます。→CKEditorドキュメント
携帯に送ろうとする場合、生成されるタグの属性とか画像とかこのままでは使えない部分が多いですが、
徐々にカスタマイズしていきましょう！！
以上、今回はCKEditorの話でした。
