Home

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>

Ver. 2.10.63 をダウンロード

Ver. 2.11.75 をダウンロード

Ver. 3.1.30 リリースのお知らせ

この記事では、2024年10月28日にリリースした Ver. 3.1.30 の修正内容について紹介いたします。

現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。

Ver. 3.1.30 リリースノート

変更点

CMS-6936 編集設定画面からサブカテゴリーの上限数を設定できるように機能を追加

修正点

CMS-6933 メディアバナーと関連エントリーのソート機能をキーボード操作したときの操作性を向上
CMS-6941 関連エントリーのデータ出力用scriptタグがタグズレする問題の修正
CMS-6943 ダッシュボードに、サブスクリプションライセンスの有効化の項目が管理者でない場合でも表示されてしまう問題の修正
CMS-6945 新しいメディアとして作成機能で焦点座標設定時に x, y どちらかが 0だと保存されない問題の修正
CMS-6946 Ver. 3.1.23 より、新しいメディアとして作成機能でファイル名の変更ができない問題の修正
CMS-6947 Ver. 3.1.23 より、メディアタイプが svg 及び file の場合、メディアのファイルを変更時にファイル名の変更が保存できない問題の修正
CMS-6949 Ver. 3.1.23 よりメディアの焦点座標を更新して、リロードせず再度画像編集モーダルを開くと変更がUI上に反映されていない問題の修正
CMS-6950 Ver. 3.1.23 よりタイムマシーンモード有効時にコンソールにJavaScriptエラーが表示される問題の修正
CMS-6952 エンタープライズ版の承認機能で、不要な承認者のバージョン公開予約ボタンが出てしまう問題を修正
CMS-6953 http 環境かつ、ダウンロード時同梱の .htaccess で静的書き出しを行うと、トップページの書き出しに失敗する問題の修正及び、同梱の .htaccess で http 環境を考慮するように修正
CMS-6954 windows 環境で静的書き出しを行うと、CSSのurl属性のパス解決に失敗する問題の修正
CMS-6955 クエリストリングが多次元配列指定された場合にphpエラーが発生する問題を修正
CMS-6957 check-seoにあるhttp記述が原因で脆弱性テストに引っかかる問題を修正（リンクをhttpsに変更）
CMS-6956 ユーザー管理の詳細画面から2段階認証設定ができない問題を修正
CMS-6959 画像ユニットで複数枚アップロードができない問題を修正

一部リリースノートの詳細な内容

CMS-6936 編集設定画面からサブカテゴリーの上限数を設定できるように機能を追加

エントリーで設定できるサブカテゴリーの数に上限数を設定できるようになりました。設定は編集設定の「エントリー項目設定」より行えます。

エントリー編集画面

編集画面設定

CMS-6956 ユーザー管理の詳細画面から2段階認証設定ができない問題を修正

「2段階認証」設定が、表側のプロフィール変更ページからしか設定できなかったのを、管理画面側のユーザー詳細画面からも変更できるように修正しました。

プロフィール変更画面

ユーザー詳細管理画面

最後に

該当する問題がありましたら、お早めにバージョンアップのご検討をお願いいたします。
また、迅速にご報告いただいたユーザーの皆さま、誠にありがとうございました。

今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいります。
今後ともどうぞよろしくお願いいたします。

文字数カウント

a-blog cmsでは、入力欄の文字数をカウントする機能が実装されています。（Ver. 2.0.0より）

デモ

0 / 10

デフォルト設定

//-----------
// input count up
countupMark     : '.js-countup',
countupMarkOver : 'acms-admin-text-danger',

countupMark	入力欄のクラス名
countupMarkOver	文字数が指定値を超えた場合に付与されるクラス名

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.countupMark = '.js-countup-sample';
  ACMS.Config.countupMarkOver = 'countover';
});

HTMLとCSSの編集

HTML

「data-label-target」でカウント数のラベルを指定します。また「data-max」で制限文字数を指定できます。

<textarea name="demo_area" title="" cols="20" class="acms-form-width-3quarters js-countup" data-label-target=".js-countup-demo_area" data-max="10"></textarea>
<p><span class="js-countup-demo_area">0</span> / <span>10</span></p>

CSS

countupMarkOverで指定したクラスを設定します

.countover {
    color: #990000;
}