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 | ワード文章から貼り付け |
- | 区切り線 |