a-blog cmsのCKEditorをカスタマイズ

a-blog cmsの合宿に参加してきました。悩んでいた部分も解消できたので、自分用にWYSIWYGエディタのカスタマイズについて忘れないように残しておきます。

a-blog cmsではWYSIWYGエディタとしてCKeditorが採用されています。使わなくてよいならなるべく使いたくはないのですが、お客さんの要望や利便性を考えた場合に、無下に消し去るわけにもいきません。

かと言って、フル機能で提供すると大変なことになってしまうということで、簡易的なものを搭載することにしました。

機能としては、以下のものに絞り込んでいます。

  • 太字
  • 打ち消し線
  • リンクの挿入と削除
  • フォントサイズ(80%～200%の5段階)
  • 文字色(読みやすいような4色・「その他の色」の削除)
  • スタイル(3色のマーカー)
  • 絵文字
  • 書式の解除
  • ソースの表示

テキストリンクと間違われないように、青の文字を無くしてみたり、あまりに小さい文字をなくしてみたり・・・などなど、ほとんどの機能をカットしています。これくらいに絞ればおかしなことにはならないはずと信じて・・・。

すっきりしたWYSIWYGエディタ

装飾する気を削ぐ景気の悪い文字用の4色

気休め同然の背景色

色を変えている部分はかなり暗めになっていますが、そうしておかないとこれで長文を書かれたら困るからです。ちょっとした強調なら蛍光マーカーみたいに背景色を使う方が目立たせやすいですしね。

実装については、以下のJSを編集に使うテンプレートに読み込んでやれば、デフォルトの設定を上書きして動作します。

ACMS.Config.emoToolbar = [
['Bold','Strike'],['Link','Unlink'],['FontSize'],['TextColor'],['Styles','-','Emoji'],['RemoveFormat','-','Source']
]

ACMS.Config.emoConfig = {
fontSize_sizes  : '80%/80%;100%/100%;120%/120%;150%/150%;200%/200%',
colorButton_colors : 'A44600,990000,333378,336633',
colorButton_enableMore : false,
stylesSet : [
{ name : 'ピンクマーカー', element : 'span', styles : { 'background-color' : '#FFECF2' } },
{ name : '黄色マーカー', element : 'span', styles : { 'background-color' : '#FFFFAE' } },
{ name : '緑マーカー', element : 'span', styles : { 'background-color' : '#E8FFDD' } },
]
}

私の場合、entry.htmlの下の方にタッチモジュールを使って、編集時だけ読み込むようにしてみました。

<!-- BEGIN_MODULE Touch_Edit -->
<script src="/themes/テーマフォルダ名/js/wysiwyg_custom.js"></script>
<!-- END_MODULE Touch_Edit -->

実はユーザーとかブログによって、使わせるWYSIWYGエディタを3つに分けています。それなりに使える人にはフル機能を、この人は今までのブログを見たら怪しいという人には今回のタイプを、もっとやばい人には絵文字くらいしか使わせないという感じです。

そのカスタマイズについては、また別の機会にまとめたいと思います。

他のCMSとかでも、オブジェクトの名前だけ変えれば動作するとは思います。試してませんけど・・・。

今取りかかっている案件で困っていた部分も解消できて、非常に有意義なイベントでした。じゃんけん大会で50,000円のスタンダードライセンスを勝ち取ったので、むしろ儲かったという気がしないでもありません・・・。

久々にブログを書いて、まだバージョン1.7だということを思い出したので、近々2.0にしたいと思います。