CKEditorに関する設定(ckeditor-config.js)

リッチテキストエディタにCKEditorを使用している環境で、CKEditorの初期フォント、サイズ、スキン(見た目)およびツールバーを変更することができます。 変更するには以下のファイルを使用します。

ファイルパス:/etc/hibiki/
ファイル名:ckeditor-config.js

この設定ファイルを変更した場合、システム全体に適用されます。 設定を適用するには、Tomcatの再起動が必要です。

設定例:

/**
 * CKEDITORのカスタマイズ設定ファイル
 * フォント、サイズ、スキンとtoolbarの表示が設定します
 */
CKEDITOR._editorConfig = CKEDITOR.editorConfig;
CKEDITOR.editorConfig = function(config) {
    CKEDITOR._editorConfig(config);

    // フォント リスト
    config.font_names = 'Yu Gothic UI/Yu Gothic UI;游ゴシック/Yu Gothic Medium;メイリオ/メイリオ,Microsoft Sans Serif,Tahoma,MS UI Gothic,MS PGothic,Osaka,Arial,sans-serif;MS ゴシック/MS ゴシック;MS 明朝/MS 明朝;MS Pゴシック/MS Pゴシック;MS P明朝/MS P明朝;宋体/宋体;Verdana/Verdana;Arial/Arial;Courier New/Courier New;Times New Roman/Times New Roman',
    // フォントサイズ リスト
    config.fontSize_sizes = '8pt/8pt;9pt/9pt;10pt/10pt;12pt/12pt;14pt/14pt;18pt/18pt;24pt/24pt;32pt/32pt',
    // デフォルトフォント
    config.font_defaultLabel = 'Yu Gothic UI',
    // デフォルトフォントサイズ
    config.fontSize_defaultLabel = '10pt',
    // CKEditorのスキン。設定可能値、moono-lisa(4.2からのデフォルトスキン)、moono(4.2以前のスキン)
    config.skin = 'moono-lisa';

    // アプリの画面用のtoolbar
    config.toolbar_Basic = [
        { name: 'font',     items: ['Font','FontSize'] },
        { name: 'style',    items: ['Bold','Italic','Underline','Strike','-','TextColor','BGColor'] },
        { name: 'format',   items: ['JustifyLeft','JustifyCenter','JustifyRight','-','Outdent','Indent'] },
        { name: 'list',     items: ['NumberedList','BulletedList'] },
        { name: 'insert',   items: ['Link','Unlink','Table','HorizontalRule'] },
        { name: 'clipboard',items: ['PasteFromWord'] }
    ];

    // 「リンクを保持する」のリッチテキスト部品のtoolbar
    config.toolbar_Image = [
        { name: 'font',     items: ['Font','FontSize'] },
        { name: 'style',    items: ['Bold','Italic','Underline','Strike','-','TextColor','BGColor'] },
        { name: 'format',   items: ['JustifyLeft','JustifyCenter','JustifyRight','-','Outdent','Indent'] },
        { name: 'list',     items: ['NumberedList','BulletedList'] },
        { name: 'insert',   items: ['Link','Unlink','Image','Table','HorizontalRule'] },
        { name: 'clipboard',items: ['PasteFromWord'] }
    ];

    // 「リンクを削除する」のリッチテキスト部品のtoolbar
    config.toolbar_Image_NoLick = [
        { name: 'font',     items: ['Font','FontSize'] },
        { name: 'style',    items: ['Bold','Italic','Underline','Strike','-','TextColor','BGColor'] },
        { name: 'format',   items: ['JustifyLeft','JustifyCenter','JustifyRight','-','Outdent','Indent'] },
        { name: 'list',     items: ['NumberedList','BulletedList'] },
        { name: 'insert',   items: ['Image','Table','HorizontalRule'] },
        { name: 'clipboard',items: ['PasteFromWord'] }
    ];
};

フォント、サイズの設定

デフォルトフォント、デフォルトフォントサイズを指定することができます。

デフォルトフォントを変更する場合は、「config.font_defaultLabel」にフォントリストの値から一つを指定します。

デフォルトフォントサイズを変更する場合は、「config.fontSize_defaultLabel」にフォントサイズリストの値から一つを指定します。

スキン(見た目)の設定

スキン(見た目)を指定することができます。「config.skin」に下表の値を指定します。

表 スキン(見た目)に設定可能な値

設定項目 説明
moono-lisa Ver.4.2以降のデフォルトスキン
moono Ver.4.2より前のスキン

ツールバーの設定

ツールバーは、リッチテキスト部品の項目値により、参照する設定項目が変わります。

設定項目 説明
config.toolbar_Basic IMPのアプリの新規登録画面、編集画面に適用される
config.toolbar_Image 「リンクを保持」項目の値が「保持する」の場合に適用される
config.toolbar_Image_NoLick 「リンクを保持」項目の値が「削除する」の場合に適用される

各設定項目での記載は、下記のように{name:'xx',item:[xxx]}が、1つの表示セットとなります。 表示セットの個数は自由で、「,」で連結します。

{ name: 'style',    items: ['Bold','Italic','Underline','-','TextColor','BGColor'] } 

nameには、表示セットの名称として、分かりやすい文字列を設定します。 itemsに設定可能な値は、下表のとおりで、個数は自由で「,」で連結します。

表 itemsに設定可能な値

設定値 説明
Font フォント
FontSize フォントサイズ
Bold 太字
Italic 斜体
Underline 下線
Strike 取り消し線
TextColor 文字色
BGColor 背景色
JustifyLeft 左揃え
JustifyCenter 中央揃え
JustifyRight 右揃え
Outdent インデント解除
Indent インデント
NumberedList 番号付きリスト
BulletedList 番号無しリスト
Link リンク挿入/編集
Unlink リンクを削除
Image イメージ
Table
HorizontalRule 水平線
PasteFromWord ワード文章から貼り付け
- 区切り線