Cleditorでフォントサイズ変更をカスタマイズ

## 目的
jQueryのプラグインのWYSIWYGエディタである「Cleditor」の
フォントサイズをスタイルのキーワードで指定できるようにする。
ex) small / medium / large 等

## なぜ変更したいのか
デフォルトのフォントサイズ変更では、

```html
<font size="1">1</font>
```
上記のようにfontタグのsize属性を変更するようになっているが、
利用しようとしているサイト内でsize属性が反映しなかったことと、
fontタグ自体HTML5で非推奨となっているようなので、
別のタグを当てたかったため。

## 方法
1). Cleditorの設定で選択肢を変更する。
Cleditorでは細かな内容が設定できるので、
sizes項目の内容をsmall, medium, large, x-large　等に変更する

```js
<script>
    $(document).ready(function() {
        $("#input").cleditor({
            width: 500, // width not including margins, borders or padding
            height: 250, // height not including margins, borders or padding
            controls: // controls to add to the toolbar
                "bold italic underline strikethrough subscript superscript | font size " +
                "style | color highlight removeformat | bullets numbering | outdent " +
                "indent | alignleft center alignright justify | undo redo | " +
                "rule image link unlink | cut copy paste pastetext | print source",
            colors: // colors in the color popup
                "FFF FCC FC9 FF9 FFC 9F9 9FF CFF CCF FCF " +
                "CCC F66 F96 FF6 FF3 6F9 3FF 6FF 99F F9F " +
                "BBB F00 F90 FC6 FF0 3F3 6CC 3CF 66C C6C " +
                "999 C00 F60 FC3 FC0 3C0 0CC 36F 63F C3C " +
                "666 900 C60 C93 990 090 399 33F 60C 939 " +
                "333 600 930 963 660 060 366 009 339 636 " +
                "000 300 630 633 330 030 033 006 309 303",
            fonts: // font names in the font popup
                "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +
                "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
            sizes: // sizes in the font size popup
                "1,2,3,4,5,6,7", <-- ここの設定を
                "small,medium, large, x-large" <-- こんな感じに変更する
            styles: // styles in the style popup
                [["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],
                ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],
                ["Header 6","<h6>"]],
            useCSS: false, // use CSS to style HTML when possible (not supported in ie)
            docType: // Document type contained within the editor
                '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
            docCSSFile: // CSS file used to style the document contained within the editor
                "",
            bodyStyle: // style to assign to document body contained within the editor
                "margin:4px; font:10pt Arial,Verdana; cursor:text"
        });
    });
</script>
```
2). ボタンをクリックした際の表示項目内容を修正する
jquery.cleditor.jsの630行目あたりを修正する

```js:jquery.cleditor.js
// Size
/** この部分を変更する
else if (popupName == "size")
  $.each(options.sizes.split(","), function(idx, size) {
    $(DIV_TAG).appendTo($popup)
      .html('<font size="' + size + '">' + size + '</font>');
  });
**/

/** こんな感じに変更する */
else if (popupName === "size")
  $.each(options.sizes.split(","), function(idx, size) {
    $(DIV_TAG).appendTo($popup)
      .html('<span style="font-size:' + size + '">' + size + '</span>');
  });
```

3). イベントの内容を変更する
730行目ぐらいのところのtryの中を修正する。

```js:jquery.cleditor.js
/** 関数追加 **/
  var execFontSize = function (editor, size) {
      var spanString = $('<span/>', {
          'text': editor.doc.getSelection()
      }).css('font-size', size).prop('outerHTML');

      editor.doc.execCommand('insertHTML', false, spanString);
  };

/** ここの部分を変更する
try { success = editor.doc.execCommand(command, 0, value || null); }
**/

/** こんな感じに **/
if(command == 'fontsize') {
  execFontSize(editor, value);
}
else {
  success = editor.doc.execCommand(command, 0, value || null);
}
```

## 問題点
太字や斜体に設定した部分のフォントサイズを変更すると、そのスタイルがリセットされてしまう。
先にフォントサイズを指定しておけば問題はないが、ユーザビリティは良くないので、修正方法が見つかったら更新します。