webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
②【CKEditor4の導入設置】config.js基本設定/カスタマイズの方法 [WYSIWYGエディタ CKEditor] eyecatch画像

②【CKEditor4の導入設置】config.js基本設定/カスタマイズの方法 [WYSIWYGエディタ CKEditor]

rss
 
前回、「①【CKEditor4の導入設置】エラーを回避する本体/プラグインのダウンロード設定方法」を記事にしましたので、
今回は「②【CKEditor4の導入設置】config.js基本設定/カスタマイズの方法」を。

 

②【CKEditor4の導入設置】config.js基本設定/カスタマイズの方法

サーバーに設置したCKEditorのフォルダ内にある、config.jsファイルを編集します。

config.js
CKEDITOR.editorConfig = function( config ) {
    この中に設定を記述
};

この中に基本設定やプラグイン等の設定をしていきます。
今回はよく利用する基本的な設定の例です。

※CKEditor公式HPの「CKEDITOR.config ページ」で設定できるオプションが確認できます。

※ちなみに、config.jsはカスタマイズして別名で保存し利用することもできます。
その場合の読込方法は、「①CKEditor4の導入設置・エラーを回避する本体のダウンロード方法」の「カスタマイズした「config.js」を別名で保存し利用したい場合」を参考にしてください。

 
言語設定

CKEditorのエディタツールバーやダイアログを日本語化設定します。

/* 言語設定
------------------------------------------------------------*/
config.language = 'ja';
 
スキンテーマの設定

ダウンロード時に選択したスキンテーマを設定します。

/* スキンテーマ設定
------------------------------------------------------------*/
config.skin = 'flat';

もし別のスキンテーマを設定し直したい場合は、
CKEditor公式HP スキンテーマ ダウンロードページ 
上記CKEditor公式ホームページの左メニューFiltersより「Skins」を選択し、好きなスキンテーマをダウンロードします。
ダウンロードしたスキンテーマのフォルダを「CKEditor」設置ディレクトリの「skins」ディレクトリの中にアップロードし、スキンテーマ名を上記のように記述します。

 
テキストエリアの幅・高さ設定

CKEditorの編集時のエディタテキストエリア(iframe)の幅・高さを設定します。(% or px値)

/* 編集画面iframe幅設定
------------------------------------------------------------*/
config.width = '100%';
config.height = '500';
 
Enterキー、Shift+Enterキーを押したときの挿入タグ

CKEditorでテキスト編集をする際に、Enterキーまたは、Shift+Enterキーを押した際、デフォルトでは<p>タグが自動的に挿入されます。
これを改行タグ<br>や<div>タグに変更したい際は下記のように設定します。

/* Enterキーを押した際に、デフォルトの<p>ではなく改行タグ<br>または<div>を挿入
------------------------------------------------------------*/
config.enterMode = 2; // <br>を挿入
config.enterMode = 3; // <div>を挿入
// ※デフォルトは「1」の<p>タグ

/* Shift+Enterキーを押した際に、デフォルトの<p>ではなく改行タグ<br>または<div>を挿入
------------------------------------------------------------*/
config.shiftEnterMode = 2; // <br>を挿入
config.shiftEnterMode = 3; // <div>を挿入
// ※デフォルトは「1」の<p>タグ
 
デフォルト書式タグの変更(斜体文字・太字・下線・打消し線・上付き文字・下付き文字)

ツールバーで選択可能な「太字(bold)・斜体(italic)・下線(underline)・打消し線(strike)・上付き文字(subscript)・下付き文字(superscript)」の、挿入されるデフォルトのタグは変更できます。
タグの変更とともに、「style」や「class」の挿入も同時に設定できます。
※設定するCLASS名には、先頭に「cke_」を付けないよう注意

/* 斜体文字のタグをデフォルト<em>から<i>に変更
------------------------------------------------------------*/
config.coreStyles_italic = { element: 'i', overrides: 'em' };

/* 斜体文字のタグをデフォルト<em>から<span>に変更しstyle付与
------------------------------------------------------------*/
config.coreStyles_italic = {element : 'span',  styles : { 'font-style': 'oblique' } };

/* 斜体文字のタグをデフォルト<em>から<span>に変更しclass付与
------------------------------------------------------------*/
config.coreStyles_italic = {element : 'span',  attributes : { 'class' : 'italic' } };

/* 太字のタグをデフォルト<strong>から<span>に変更しstyle付与
------------------------------------------------------------*/
config.coreStyles_bold = {element: 'span', styles: { 'font-weight': 'bold' } };
 
ツールバーの基本設定

ツールバーの基本的な設定例です。
ツールバーの色や、折り畳み操作の可否を設定します。

/* ツールバー基本設定
------------------------------------------------------------*/
  /* ツールバーカラー
  ------------------------------------------------------------*/
  config.uiColor = '#dbdbdb';

  /* ツールバー折りたたみ操作
  ------------------------------------------------------------*/
  config.toolbarCanCollapse = true;
 
ツールバーに表示するボタンの設定

① ツールバーに表示するボタンを、グループ名で指定し自動表示する場合

/* ツールバー ボタン表示の設定 ※①ボタンをグループ名指定で自動表示する場合
------------------------------------------------------------*/
config.toolbarGroups = [
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'links' },
    { name: 'insert' },
    { name: 'forms' },
    { name: 'tools' },
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'others' },
    '/', // 強制改行
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'styles' },
    { name: 'colors' },
    { name: 'about' }
];
 

 ② ツールバーに表示するボタンを、一つずつ指定して表示する場合

/* ツールバー ボタン表示の設定 ※②ボタンを一つずつ指定して表示する場合
------------------------------------------------------------*/
config.toolbar = [
    { name: 'document', items: [ 'Preview', '-', 'Sourcedialog', '-' ] },
    { name: 'clipboard', items: [ 'SelectAll', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', items: [ 'Find', '-','SpellChecker', 'Scayt', 'AutoCorrect' ] },
    { name: 'tools', items: [ 'Maximize', 'ShowBlocks', 'Zoom' ] },
    '/', // 強制改行
    { name: 'insert', items: [ 'Image' ] },
    { name: 'links', items: [ 'lightbox', 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: [ 'Slideshow','Youtube','-','leaflet','Iframe' ] },
    { name: 'insert', items : [ 'Smiley','Glyphicons','FontAwesome','Symbol' ] },
    { name: 'insert', items: [ 'Table', 'HorizontalRule', 'CreateDiv', 'CodeSnippet', 'Code' ] },
    '/', // 強制改行
    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
    { name: 'paragraph', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
    '/', // 強制改行
    { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    { name: 'document', items: [ 'Templates' ] },
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize','lineheight' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'about', items: [ 'About' ] }
];
    
ツールバー「フォント(Font)」設定

この設定で、ツールバーの「フォント」セレクトボックスに選択肢として表示され、選択できるようになります。
下記例で、「メイリオ,Meiryo;」までが一つの選択肢となります。
テキスト編集時にツールバーで選択したフォントがstyleで挿入されます。

/* ツールバー「フォントファミリー(Font)」
------------------------------------------------------------*/
config.font_names='メイリオ,Meiryo; "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",YuGothicM,"Yu Gothic"; MS Pゴシック; MS ゴシック; "游明朝","Yu Mincho",YuMincho; MS P明朝; MS 明朝; Arial/Arial, Helvetica, sans-serif; Comic Sans MS/Comic Sans MS, cursive; Courier New/Courier New, Courier, monospace; Georgia/Georgia, serif; Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif; Tahoma/Tahoma, Geneva, sans-serif; Times New Roman/Times New Roman, Times, serif; Trebuchet MS/Trebuchet MS, Helvetica, sans-serif; Verdana/Verdana, Geneva, sans-serif';
 
ツールバー「フォントサイズ(Font-size)」設定

この設定で、ツールバーの「フォントサイズ」セレクトボックスに選択肢として表示され、選択できるようになります。
下記例で、「10px/70.0%;」までが一つの選択肢となります。
左側「10px」がセレクトボックス表示名、実際には右側「70.0%」がstyle="font-size:70.0%;"として挿入されます。

/* ツールバー「フォントサイズ(font-size)」 :14pxを標準にした場合の例
------------------------------------------------------------*/
config.fontSize_sizes = '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:〇;"として挿入されます。

/* ツールバー「行間(line-height)」 
------------------------------------------------------------*/
config.line_height = "1em;1.1em;1.2em;1.3em;1.5em;1.8em;2em;2.2em;2.5em;2.8em;3em;";
 
ツールバー「書式(Block要素フォーマットタグ)」の設定

よく使用するBlock要素を設定します。
この設定で、ツールバーの「書式(段落の書式)」セレクトボックスに選択肢として表示され、選択できるようになります。

/* ツールバー「書式」:よく使うBlock要素を設定
------------------------------------------------------------*/
config.format_tags = 'p;h2;h3;h4;h5;h6;pre;div';
 
ツールバー「スタイルタグ(書式付きTag)」の設定

よく使用するスタイル(書式)付き要素を設定します。
この設定で、ツールバーの「スタイル(ブロックスタイル)」セレクトボックスに選択肢として表示され、選択できるようになります。
「name」には選択肢として表示する表示名、「element」には希望の要素、「styles」には挿入するstyleを設定します。
styleを挿入せず、class名を挿入したい場合は、「styles:{'CSS-style名':''}」ではなく「attributes:{'class':'class名'}」と設定します。
詳細は CKEditor公式HP 「CKEditorのエディタや表示に「スタイル・CSS」を加える方法の詳細」

下記は一例です。参考にどうぞ。
「テキスト文」と命名しているBlockスタイルは、インデントの深さ別に、
「マーカー」や「ライン」と命名しているInlineスタイルは、蛍光ペンやペンで下線を引いたようなスタイルを設定しています。

/* スタイル(書式)付き要素 :よく使うスタイル付き要素を設定
------------------------------------------------------------*/
config.stylesSet = 'my_styles';

CKEDITOR.stylesSet.add( 'my_styles', [
    // Block Styles
    { name: 'テキスト文',  element: 'p', styles: { 'font-size': '1em' } },
    { name: '標準テキスト文',  element: 'p',  styles: { 'font-size': '1em','margin': '10px 0 10px 0' } },
    { name: '段1-テキスト文',  element: 'p',  styles: { 'font-size': '1em','margin': '10px 0 10px 10px' } },
    { name: '段2-テキスト文',  element: 'p',  styles: { 'font-size': '1em','margin': '10px 0 10px 25px' } },
    { name: '段3-テキスト文',  element: 'p',  styles: { 'font-size': '1em','margin': '10px 0 10px 40px' } },
    { name: '段4-テキスト文',  element: 'p',  styles: { 'font-size': '1em','margin': '10px 0 10px 55px' } },
    // Inline Styles
    { name: 'マーカー黄',  element: 'span',  styles: { 'background': 'linear-gradient(transparent 45%, #ffff66 45%)' } },
    { name: 'マーカーピンク',  element: 'span',  styles: { 'background': 'linear-gradient(transparent 45%, #ffc9db 45%)'  } },
    { name: 'マーカー水色',  element: 'span',  styles: { 'background': 'linear-gradient(transparent 45%, #acffff 45%)'  } },
    { name: 'マーカー緑',  element: 'span',  styles: { 'background': 'linear-gradient(transparent 45%, #b8ff92 45%)'  } },
    { name: 'マーカーベージュ',  element: 'span',  styles: { 'background': 'linear-gradient(transparent 45%, #ffd791 45%)'  } },
    { name: 'マーカーグレー',  element: 'span',  styles: { 'background': 'linear-gradient(transparent 45%, #ddd 45%)'  } },
    { name: 'ライン赤',  element: 'span',  styles: { 'background': 'linear-gradient(transparent 90%, #ff5a5a 90%)'  } },
] );

※この方法とは別に、
別途「stylesheetparser」プラグインを用いて、カスタムスタイル(CSS)を外部CSSファイルにして読み込ませることも可能です。
別記事参照:③CKEditor4プラグイン【stylesheetparser】外部CSSファイル読込・ カスタマイズスタイルの追加

 
プラグインの無効化

デフォルトのプラグインのうち、無効にしたいプラグインがある場合に設定。

/* プラグイン無効化
------------------------------------------------------------*/
config.removePlugins = 'resize,uploadcare';
 
ツールバーからボタンを除外

ツールバーから除外したいボタンがある場合に設定。(特に、ツールバーボタンをグループで設定する際に有用)

/* ツールバーボタンを除外
------------------------------------------------------------*/
config.removeButtons = 'Subscript,Superscript';
 
ダイアログからタブを除外

プラグインの各ダイアログで、除外したい(非表示にしたい)タブがある場合に設定。

/* ダイアログからタブ除外
------------------------------------------------------------*/
config.removeDialogTabs = 'link:upload;link:advanced';



次回から、各プラグインの導入設定方法・カスタマイズ方法も記事にしていこうと思います。


 
ページの先頭へ

rss
1件目 (1件中)