Advanced Custom Fieldsのビジュアルエディタでエンターキーで改行させる方法

Web開発
この記事は約3分で読めます。

こんにちは、@Manabu です。

以前に、Wordpressのビジュアルエディタでのエンターキーの動作を改行に変更する方法について、記事を作成し紹介しました。

Wordpressのビジュアルエディタでエンターキーを押して改行させる方法

ただ、Wordpressの人気プラグインである「Advanced Custom Fields」を使用している人はこの対応で解決しなかったのではないでしょうか。

今回はそんな人向けに、Advanced Custom Fieldsで使用するビジュアルエディタのエンターキーの動作を変更させる方法について紹介します。

前提

WordPressはデフォルトでTinyMCEというオープンソースのリッチテキストエディタを使用しています。

こちらのデフォルトで使用できるビジュアルエディタについての対応は、以下の記事に対応をまとめています。

Wordpressのビジュアルエディタでエンターキーを押して改行させる方法

ただ、こちらの対応を行っただけではAdvanced Custom Fieldsで使用できるようになるビジュアルエディタまでうまく動作することができません。

対応

基本的に、やりたいことはデフォルトの対応と同じことです。

以下の二つをACFのビジュアルエディタにも設定します。

・エンターキーとシフトエンターの動作を入れ替える
・コンテンツ部分が空の場合、pタグを挿入する
これらの設定は、以下のコードをfunctions.phpに記載するだけで動作します。
function my_acf_tinymce_init() {
  ?>
<script type="text/javascript">
      (function($) {
          acf.add_filter('wysiwyg_tinymce_settings', function(mceInit, id) {
              // forced_root_block を false に設定
              mceInit.forced_root_block = false;
              // setup オプションにカスタムJavaScriptを追加
              mceInit.setup = function(editor) {
                  editor.on('keydown', function(e) {
                      // コンテンツが空の場合は <p> タグを追加
                      if (editor.getContent() === '') {
                          editor.setContent('<p><br></p>');
                      }
                  });
              };
              return mceInit;
          });
      })(jQuery);
</script>
<?php
}
add_action('acf/input/admin_head', 'my_acf_tinymce_init');

追加している設定は基本的に同じです。

エンターキーの動作や文字揃えなど、詳細なテストを行って導入するようにしてください。

まとめ

WordPressの中でも、ACFを使用する場合のビジュアルエディタのエンターキーの変更に関する対応について紹介しました。

こちらの記事も参考にして、少しでも効率よく記事を作成できることを願っています。