WYSIWYGエディタ

2023年09月14日以降にリリースされるバージョンより、WYSIWYGエディタで利用しているライブラリが「CKEditor」から「Trumbowyg」に変更されました。

詳しくは、リリースノートをご確認ください。

a-blog cmsでは、任意の入力フィールドをWYSIWYGエディタにする設定が標準で実装されています。(Ver. 1.2.1より)

この機能を使用するとカスタムフィールドやお問い合わせフォームなどの任意の入力フィールドでWYSIWYGエディタを使用することができます。

a-blog cms では、WYSIWYGエディタに Trumbowygというライブラリを使用しています。

デモ

デフォルトの設定

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

  //-------------------
  // WYSIWYG Editor (trumbowyg)
  // @link https://alex-d.github.io/Trumbowyg/
  wysiwygMark: 'textarea.js-wysiwyg,textarea.js-ckeditor,textarea.js-emoditor',
  wysiwygConfig:
  {
    lang: 'ja',
    // resetCss: true,
    autogrow: true,
    tagsToRemove: ['script'],
    btns: [
      ['viewHTML'],
      ['undo', 'redo'], // Only supported in Blink browsers
      ['formatting'],
      ['fontsize'],
      ['lineheight'],
      ['strong', 'em', 'del'],
      // ['superscript', 'subscript'],
      ['foreColor', 'backColor'],
      ['link'],
      ['justifyLeft', 'justifyCenter', 'justifyRight'],
      ['unorderedList', 'orderedList'],
      ['horizontalRule'],
      ['table', 'tableCellBackgroundColor', 'tableBorderColor'],
      ['removeformat'],
      ['fullscreen'],
    ],
    tagClasses: {
      // table: 'class-name',
    },
  },


wysiwygMark WYSIWYGエディタを適用する入力フィールドのセレクタを指定します。
wysiwygConfig WYSIWYGエディタのオプションを設定できます。Trumbowyg のオプションがそのまま設定できます。詳細は Trumbowyg のドキュメントを参照してください。

使い方

textarea要素に .js-wysiwyg を適用します。

<textarea name="textarea" class="js-wysiwyg"></textarea>