CKEditorを触り続けています
どうもこんにちは福本です。
前回に引き続きまして、「CKEditorを携帯デコメール送信用にカスタマイズする」の第二弾です。
あれから色々CKEditorをいじり続け、一通りのコードの流れは読みました。
デコメールを送るために必要なタグやそれに伴うボタンは揃いそれなりの形にはなってきたのですが、
やはりこの短期間ですべての機能を使いこなせるほど、
浅くない素晴らしいリッチテキストエディターなので、
多少ゴリゴリカスタマイズしてしまった部分もあります。
情報が少なく、ドキュメントとコアファイルを読んで進めるしかなかったので、
多少汚い部分はあるかもしれませんが、皆様の参考になれば幸いです。
ですので、このシリーズをしばらく続けていこうかと思います。
前回は確か導入と基本的な設定までやりましたよね。
今回は、新しいモバイル用Justifyプラグインを作ってみます。
プラグインと言っても、現在のプラグインをちょこっと修正するだけです。
どうして分けるのかと言うと、ソースをダウンロードしてきてそのソースはほぼ何もいじらず、
この新しいプラグインを追加するだけで使えるようになるので楽だからです。
また、今回のカスタマイズで特に問題は出ておりませんが、
参照される方はあくまでも自己責任でお願い致します。
「こうやった方が簡単やったよ」とかも受け付けています。
モバイル用Justifyプラグイン「mbjustify」の作成
では、手順から説明します。
- 元のjustifyプラグインをコピー。コピーしたものにmbjustifyと名付ける
- 自作configファイルに元のjustifyプラグインを停止する旨を書く
- 自作configファイルにmbjustifyプラグインを利用する旨を書く
- mbjustifyをプラグインとして認識させるために、ソースにプラグイン追加の旨を書く
- mbjustifyプラグインをカスタマイズ
- 動作確認
以上、6項目です。
今回のプラグインの主な機能は、divに付ける属性を変更するというものです。
基本的にデコメールとして送信する場合、
配置に関しての属性は、alignでなければいけません。
それに対して、CKEditorではstyle=”text-align”が出力されてしまいます。
これでは、デコメールとしてはちょっとまずいので、
属性をstyleからalignに変えてしまいます。
せっかく進化してalignからstyleになったのに、また原点回帰させてしまうのは心許ないですが、
デコメールを送るためには仕方がありません変更しましょう。
CKEditorカスタマイズの前提知識
まず始めに前提の確認ですが、CKEditorは基本的にckeditor.jsに書かれていることで動いています。
そして、拡張性を持たせるために、その大ボスファイルに書かれたことを切り分ける形で、
プラグインという概念が存在しています。なので、プラグインに書かれたことは、
大ボスファイルを上書きできるということ。
configファイルは、その大ボスファイルや各種プラグインの設定を変更することができるファイルです。
CKEditorでいうところの、CKEDITOR.configとつくやつですね。
これをconfigファイルで値を変更してあげると、他のファイルをいじらなくても表示結果を変更できます。
configだけで変更しきれないことはプラグインに書き、
それでもなお変更できない時（コアファイルの変更）に始めて、
大ボスファイルを変更するというイメージです。
もしかすると大ボスファイルは全く変更しなくてもいけるかもしれませんが、
そこまで試せていなかったので、それはまたの機会に。
基本的には上記のような前提知識が必要です。
ですので今回はプラグインを追加なので、
configファイルでは手に終えなかったことをもう一段階メタファイルで処理を直接変えてしまいます。
また、大ボスファイルやプラグインファイルは改行がなく、変数もアルファベット人文字とかで、
かなり読み難いと思います。そんな時は、_sourceディレクトリのなかの同じ名前のファイルを見て下さい。
改行されていて読みやすいですよ！
また、一部ソースであれば、WEB上にもあります。ドキュメントソース。
手順に沿ってmbjustifyをカスタマイズ
では始めましょう。
とりあえず、1番の項目は各自完了して下さい。
justifyがあるのと同じpluginsディレクトリに設置です。
それから、前回の内容は前もって実装して下さい。
特にconfigをmyconfigに分けてmyconfigの中に設定を書いていくということ、
そのmyconfigの中で、enter_modeをdivに変更するのは重要です。
デコメールはbrで改行させるよりdivで改行させる方が確実です。
config.js内
config.customConfig = '/js/myconfig.js';
mycongi.js内
config.enterMode = CKEDITOR.ENTER_DIV;
続きまして、先ほども出てきましたmyconfigの中で、
以下の項目を設定して下さい。
config.removePlugins = 'justify';
これは、デフォルトのjustifyプラグインを取り除くものです。
ついでに、今回作成するmbjustifyを追加しておきましょう。
config.extraPlugins = 'mbjustify';
これで3番までが終了です。
続いて、ここからようやくプラグインファイルの中身を変更していきます。
mbjustifyを開いて下さい。
ソースの中段より少し下に、以下のような表記が見つけて下さい。
CKEDITOR.plugins.add('justify',
これがプラグインを追加するコードになりますので、このままだとjustifyになってしまいます。
これをmbjustifyに変えてあげましょう。
CKEDITOR.plugins.add('mbjustify',
できたら、4番の項目は終了です。
次です。ソースをざっと眺めると、style属性のtext-alignを出力している節があるのがわかると思います。
それらの中の必要最低限のところだけ変更していきます。
else if(n.state==CKEDITOR.TRISTATE_OFF&&!n.isDefaultAlign)k.setStyle('text-align',n.value);else k.removeStyle('text-align');
ソース中段に上のようなelse ifを確認できると思います。
これが現在の表示のコードと思われます、こいつを変更してやります。
else if(n.state==CKEDITOR.TRISTATE_OFF&&!n.isDefaultAlign)k.setAttribute('align', n.value);else k.removeAttribute('align');
setStyleをsetAttributeに変え、removeStyleをremoveAttributeに変えています。
この辺り、ドキュメントを読めばメソッドとして書いてありますね。
あと念のため、中段より少し上にある、
k.removeAttribute('align');
を取り除いて下さい。無駄なので。
これで5番までが終了。最後に動作確認です。
予想通りに動きになりました？？
もし上手くいかないという人は、もう一度コードを見直したり、
変更前のページのキャッシュが残っていると上手く動かない場合があるので、
消してから試してみて下さい。
最後に
この様に今あるプラグインをちょっといじるだけで、
自分専用のプラグインが簡単に作成できるので、
デコメール送信以外にも必要に応じて作ってみて下さい。
僕も所々よく詰まりましたが、ソースをしっかり読んで辿っていけば必ず答えは見つかります。
頑張って下さい！まだ続きます！
