今回は「2【CKEditor4の導入設置】config.js基本設定/カスタマイズの方法」を。2【CKEditor4の導入設置】config.js基本設定/カスタマイズの方法サーバーに設置したCKEditorのフォルダ内にある、config.jsファイルを編集します。この中に設定を記述};この中に基本設定やプラグイン等の設定をしていきます。今回はよく利用する基本的な設定の例です。ページ」で設定できるオプションが確認できます。※ちなみに、config.jsはカスタマイズして別名で保存し利用することもできます。その場合の読込方法は、「1CKEditor4の導入設置・エラーを回避する本体のダウンロード方法」の「カスタマイズした「config.js」を別名で保存し利用したい場合」を参考にしてください。言語設定CKEditorのエディタツールバーやダイアログを日本語化設定します。'ja';スキンテーマの設定ダウンロード時に選択したスキンテーマを設定します。ダウンロードページ上記CKEditor公式ホームページの左メニューFiltersより「Skins」を選択し、好きなスキンテーマをダウンロードします。ダウンロードしたスキンテーマのフォルダを「CKEditor」設置ディレクトリの「skins」ディレクトリの中にアップロードし、スキンテーマ名を上記のように記述します。テキストエリアの幅・高さ設定CKEditorの編集時のエディタテキストエリア(iframe)の幅・高さを設定します。'500';Enterキー、Shift+Enterキーを押したときの挿入タグCKEditorでテキスト編集をする際に、Enterキーまたは、Shift+Enterキーを押した際、デフォルトでは<p>タグが自動的に挿入されます。これを改行タグ<br>や<div>タグに変更したい際は下記のように設定します。線・上付き文字・下付き文字)ツールバーで選択可能な「太字(bold)・斜体(italic)・下線(underline)・打消し線(strike)・上付き文字(subscript)・下付き文字(superscript)」の、挿入されるデフォルトのタグは変更できます。タグの変更とともに、「style」や「class」の挿入も同時に設定できます。};ツールバーの基本設定ツールバーの基本的な設定例です。ツールバーの色や、折り畳み操作の可否を設定します。}];ツールバー「フォント(Font)」設定この設定で、ツールバーの「フォント」セレクトボックスに選択肢として表示され、選択できるようになります。下記例で、「メイリオ,Meiryo;」までが一つの選択肢となります。テキスト編集時にツールバーで選択したフォントがstyleで挿入されます。sans-serif';ツールバー「フォントサイズ(Font-size)」設定この設定で、ツールバーの「フォントサイズ」セレクトボックスに選択肢として表示され、選択できるようになります。下記例で、「10px/70.0%;」までが一つの選択肢となります。左側「10px」がセレクトボックス表示名、実際には右側「70.0%」がstyle="font-size:70.0%;"として挿入されます。'10px/70.0%;11px/78.6%;12px/85.8%;13px/92.9%;標準/100%;15px/107.2%;16px/114.3%;17px/121.5%;18px/128.6%;19px/135.8%;20px/142.9%;21px/150%;22px/157.2%;';ツールバー「行間(Line-height)」設定この設定で、ツールバーの「行間」セレクトボックスに選択肢として表示され、選択できるようになります。テキスト編集時にツールバーで選択した行間が、style="line-height:〇;"として挿入されます。"1em;1.1em;1.2em;1.3em;1.5em;1.8em;2em;2.2em;2.5em;2.8em;3em;";ツールバー「書式(Block要素フォーマットタグ)」の設定よく使用するBlock要素を設定します。この設定で、ツールバーの「書式(段落の書式)」セレクトボックスに選択肢として表示され、選択できるようになります。'p;h2;h3;h4;h5;h6;pre;div';ツールバー「スタイルタグ(書式付きTag)」の設定よく使用するスタイル(書式)付き要素を設定します。この設定で、ツールバーの「スタイル(ブロックスタイル)」セレクトボックスに選択肢として表示され、選択できるようになります。「name」には選択肢として表示する表示名、「element」には希望の要素、「styles」には挿入するstyleを設定します。styleを挿入せず、class名を挿入したい場合は、「styles:{'CSS-style名':'値'}」ではなく「attributes:{'class':'class名'}」と設定します。