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>