WYSIWYGエディタ(ユニット用)

a-blog cmsでは、テキストユニットでWYSIWYGエディタが使用可能です。(本機能は以前は「絵文字エディタ」と呼んでおりましたが、絵文字機能が使用できなくなったため「WYSIWYGエディタ(ユニット用)」としてご紹介しております)

使用しているライブラリは同じCKEditorですが、カスタムフィールドとユニットで使用できるWYSIWYGエディタでは設定が分かれています。ユニット用のWYSIWYGエディタでは、ツールバー表示設定、ほか詳細設定がカスタマイズされています。

※Ver.2.7.0以上では、絵文字を利用する祭はJavaScriptの設定だけではなくUTF-8の絵文字を利用するの記事で書かれている設定もおこなってください。

デモ

設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

 emojiDir        : ACMS.Config.jsRoot + 'acms/images/emoji/',


emojiDir 絵文字画像のファイルが格納されているディレクトリパスを指定します。例)acms/images/emoji/

任意の入力フィールドでウィジウィグ・絵文字エディターが利用できるようにする

  emoMark         : 'textarea.js-emoditor',


emoMark ここで指定した任意のHTMLの要素で、ウィジウィグ・絵文字エディターを利用できます。
例)「textarea.js-emoditor」と指定した場合
<textarea name="textarea" rows="" cols="" class="js-emoditor"></textarea>

ウィジウィグ入力ツールバーの表示・非表示の設定をする

emoToolbar: [
  ['Source', '-', 'Templates'],
  ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
  ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
  ['Maximize', 'ShowBlocks'],
  '/',
  ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
  ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
  ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
  ['Link', 'Unlink', 'Anchor'],
  ['Table', 'HorizontalRule'],
  '/',
  ['Styles', 'Format', 'Font', 'FontSize'],
  ['TextColor', 'BGColor']
],


emoToolbar ツールバーの表示・非表示や表示順を指定します。「[]」でアイコンのくくりを、「/」でツールバーの改行を指定します。非表示にしたいものはそのアイコンの文字列を削除します。(削除する際はカンマやコーテーションに注意してください。)

その他詳細設定

emoConfig: {
  enterMode: 1,
  fontSize_sizes: '80%/80%;90%/90%;100%/100%;110%/110%;120%/120%;130%/130%;140%/140%;150%/150%;160%/160%;170%/170%;180%/180%;190%/190%;200%/200%',
  font_names: 'MSゴシック/MS Gothic, Osaka-Mono, monospace; MS Pゴシック/MS PGothic, Osaka, sans-serif; MS UI Gothic/MS UI Gothic, Meiryo, Meiryo UI, Osaka, sans-serif; MS P明朝/MS PMincho, Saimincho, serif; 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',
  language: 'ja'
},
emoArray: [
  //    {
  //        'mark'      : '',
  //        'toolbar'   : [],
  //        'config'    : {}
  //    }
],


enterMode ウィジウィグの入力フィールド内で改行を入れた場合の、HTMLへの変換の指定です。 1は<p>、2は<br>、3は<div>に変換されます。

その他詳細設定に関しては、以下のページに詳細設定の情報が掲載されています。
Class Config (CKEDITOR.config) - CKEditor 4 API docs