CKEditorをガラケー向けにカスタマイズする

本ページで記載しているCKEditorのバージョンは
4.6.2
になります。

#WYSIWYGエディタのCKEditorをガラケー向けにカスタマイズ

担当したシステムで
ガラケー向けのHTMLを記載する機能にWYSIWYGエディタを導入しているんですが
運用チームからあまりに不便すぎるので何とかしてほしいとの要望があり早速調査を開始。

既存のWYSIWYGエディタ（一応名前は伏せます）の情報サイトが少なすぎて
ソースを一から追いかけるしかなく・・・
しかたなく中身を見たんですが汚すぎて吐きそうに・・・

これはもともと汚いのか・・・
前任者がカスタムした結果こうなってしまったのか・・・
はたまたその両方か・・・

function化されておらず、同じようなロジックがクソほどありました。
何日か頑張ったけど断念。

「無理でした」とも言えないので勝手に新しく作りなおして「改修は無理だったので作り直しました」
と報告することに方針変更。
外見ほぼ一緒なら運用チームも文句言わないだろうし。

どのWYSIWYGエディタを使うかいろいろググった結果、いくつかの候補からCKEditorをチョイス。
選定の決め手は情報量。
カスタム前提なのでカスタムした報告をしている情報サイトの多いやつということで選びました。

##要件

どうせ作り直すし
あとからアレコレ欲しいと言われるのも嫌なので
追加要望もコミで再度要件を聞き直してみる。

改めて必要なボタン、今ある不要なボタンを聞き出してみる。
その結果、出てきたのを以下にまとめてみた。

欲しい機能リスト

[ソース]ボタン・・・HTML表示とタグ表示の切り替え
[プレビュー]ボタン・・・別WINDOWでHTML表示する
[貼り付け]ボタン・・・クリップボードの内容を貼り付け
[元に戻す/やり直す]ボタン・・・操作を戻したり
[左寄せ/中央寄せ/右寄せ]ボタン※・・・文字位置
[文字サイズ]ボタン※・・・標準/大/特大の３パターンから文字サイズを選択
[太字]ボタン・・・太字にする
[アンダーライン]ボタン・・・アンダーラインをひく
[文字色]ボタン※・・・文字色を変える
[リンク]ボタン・・・リンク挿入
[リンク解除]ボタン・・・リンク挿入の解除
[水平線]ボタン・・・水平線をひく(hrタグ)
[画像]ボタン・・・画像挿入
[行背景色]ボタン※・・・文字背景色を設定
[テキストエリア内の改行]・・・brタグにしたい※

##方針

対ガラケー向けということでstyleが一切使えないため、上記要件の※部分はカスタムが必要となってきます。他の機能は既存にあるのでボタンを配置するだけで完了。

カスタムが必要な機能を以下のようにしていく。

[左寄せ/中央寄せ/右寄せ]ボタン
デフォルトはスタイルで位置指定される

style="text-align:right"
style="text-align:center"

これ↑をこう↓変更

[左寄せ]
<div align="left">テキスト</div>

[右寄せ]
<div align="right">テキスト</div>

[中央寄せ]
<center>テキスト</center>

[文字サイズ]ボタン
デフォルトはスタイルでサイズ指定される

<span style="font-size:14px">テキスト</span>

これ↑をこう↓変更

<font size="5">テキスト</font>

[文字色]ボタン
デフォルトはスタイルで色指定される

<span style="color:#ff0000">テキスト</span>

これ↑をこう↓変更

<font color="#ff0000">テキスト</font>

[行背景色]ボタン
もともとないので新規作成。
こんな感じ↓

<table bgcolor="#ff0000" width="100%">
<tbody><tr><td>テキスト</td></tr></tbody>
</table>

[テキストエリア内の改行]
もともとはpタグ

<p>テキスト</p>

これ↑をこう↓変更

テキスト<br/>

##実装（定義ファイル）
まずは簡単なところから。

[テキストエリア内の改行]

これは config.js に定義を書くだけ。

config.js

CKEDITOR.editorConfig = function( config ) {
  config.language = 'ja';

  config.enterMode = 2;
  config.shiftEnterMode = 1;
  ～略～
};

enterMode だけ書けばいいんですが
一応shift+Enterの挙動も書いてみました。
1 が br改行で 2がpタグ改行です。
他にblockタグ（divタグ）で囲う改行もできます。

リテラルで書いてますが、CKEDITOR.ENTER_BR など定数が切られているのでそちらを使うのをお勧めします…

続いて

[文字色]ボタン

これも定義だけです。

config.js

CKEDITOR.editorConfig = function( config ) {
  ～略～
  config.colorButton_foreStyle.element = 'font';
  config.colorButton_foreStyle.attributes = {'color':'#(color)'};
  config.colorButton_foreStyle.styles = '';
  ～略～
};

こんな感じです。

続いて

[文字文字サイズ]ボタン

これも定義だけです。

config.js

CKEDITOR.editorConfig = function( config ) {
  ～略～
  config.fontSize_sizes='標準/3;大/4;特大/5;';
  config.fontSize_style = {
    element: 'font',
    attributes: { 'size': '#(size)' },
    overrides: [ {
      element: 'font', attributes: { 'size': null }
    } ]
  };
  ～略～
};

こんな感じです。

のこりの

[左寄せ/中央寄せ/右寄せ]ボタン

は styles.js をいじることで対応。

[行背景色]ボタン

はpluginを作成することで対応しました。

ちょっと長くなったのでこれらは
別ページ
に書きますね。