目的
jQueryのプラグインのWYSIWYGエディタである「Cleditor」の
フォントサイズをスタイルのキーワードで指定できるようにする。
ex) small / medium / large 等
なぜ変更したいのか
デフォルトのフォントサイズ変更では、
<font size="1">1</font>
上記のようにfontタグのsize属性を変更するようになっているが、
利用しようとしているサイト内でsize属性が反映しなかったことと、
fontタグ自体HTML5で非推奨となっているようなので、
別のタグを当てたかったため。
方法
1). Cleditorの設定で選択肢を変更する。
Cleditorでは細かな内容が設定できるので、
sizes項目の内容をsmall, medium, large, x-large 等に変更する
<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行目あたりを修正する
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の中を修正する。
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);
}
問題点
太字や斜体に設定した部分のフォントサイズを変更すると、そのスタイルがリセットされてしまう。
先にフォントサイズを指定しておけば問題はないが、ユーザビリティは良くないので、修正方法が見つかったら更新します。