TinyMCEでtableの初期CSSクラスとclass選択をつけた話

WordPressのプラグイン「Advanced Editor Tool（旧TinyMCE Advance）（以下：TinyMCE）」で、Tableに初期のCSSクラスをつけておきたいことってありませんか？

また、「このTableはSP時に段落ちさせたくない」「このTableは複雑で、SP時に見栄えが悪いから横スクロールにしておきたい」なんてこともありますよね。

その場合、Tableに新たにCSSクラスを付与する必要が出ててくるので、TinyMCE側でTableのCSSクラスが選択できればすごくいいと思いませんか？

今回は、TinyMCEの初期CSSクラスの設定と、CSSクラスの切り替え機能を実装していきましょう。

# この記事で解決すること

TinyMCEのTableの初期CSSクラスを設定できる
TinyMCEのTableのCSSクラスが選択できるようになる
TinyMCEのTableが横スクロールできるようになる（おまけ参照）

前提

Advanced Editor Tool（旧TinyMCE Advance）のインストール
Classic EditorのインストールもしくはClassicエディタの環境
※新エディタは何もしなくてもCSSクラスが指定できるのでスルーします

フォルダ構成

theme_name
- js
  - tinymce-table-sp.js
- functions.php
- style.css

手順

phpの処理
スクロールTableの実装（おまけ）

jsの作成
jsの読み込み
cssの設定

phpの処理

functions.php

add_filter('tiny_mce_before_init', 'my_mce_table_options');
function my_mce_table_options( $init ) {

  // 初期Table classの準備
  $default_table_class = 'table';
  
  // 選択できるclassの設定
  $table_class_list    = array(
    array(
      'title' => '初期設定',
      'value' => $default_table_class
    ),
    array(
      'title' => 'スクロール',     // 表示名
      'value' => 'table-scroll'  // CSSクラス名
    ),
  );
  
  // 初期Table classの設定
  $table_default_attributes = array(
    'class' => $default_table_class,
  );

  // 設定をTinyMCEに送る
  $init['table_class_list']         = json_encode($table_class_list);         // class選択設定
  $init['table_default_attributes'] = json_encode($table_default_attributes); // 初期class設定
  return $init;
}

TinyMCEの新たな設定を作成し、tiny_mce_before_initに対してfilterフックをかけています。

上記の設定では、「初期設定」と「スクロール」からTableのCSSクラスを選択できます。

変更する箇所は5行目のclassと、13行目～16行目の選択できるclassの設定のみです。

更に選択できるCSSクラスを追加したい場合は、16行目以降に新たな配列を追加してください。

今回の本題はこれで完了です。

スクロールTableの実装（おまけ）

さて、本題は完了しましたが、お気付きの通りtableにCSSクラスを付与しただけで横スクロールしてくれるほどTableは優しくありません。

Tableを横スクロールさせるにはTableタグの外側にWrapperが必要となるのですが、実装するためにはJsを書く必要があります。

また、CSSも設定する必要があります。

では実装していきましょう。

jsの作成

tinymce-table-sp.js

window.addEventListener('load', () => {
  if (document.querySelector('.table-scroll')) {
    var target = document.querySelectorAll('.table-scroll');
    target.forEach(function (el) {
      el.outerHTML = "<div class='table-scroll__wrap'>" + el.outerHTML + "</div>";
    })
  }
});

1行目のaddEventListenerをloadに対してかけていますが、iOS Safariのバグを回避できるようであればDOMContentLoadedが良いでしょう。

2行目は.table-scrollがdocumentにない場合は処理しないでほしいのでif分岐しています。

見つかった.table-scrollを.table-scroll__wrapで囲ってくださいとう構文ですね。

これで下準備完了です。

jsの読み込み

functions.php

add_action( 'wp_enqueue_scripts', 'tableSpScript' );
function tableSpScript() {
  wp_enqueue_script(
    'tableSp_script',
    get_template_directory_uri().'/js/tinymce-table-sp.js',
    array()
  );
}

子テーマの場合は5行目のget_template_directory_uri()をget_stylesheet_directory_uri()に変更してください。

これでjs側の処理が完了です。

cssの設定

style.css

.table-scroll {
  th,
  td {
    word-break: keep-all;
    white-space: nowrap;
  }
  &__wrap {
    overflow-x: auto;
    &::-webkit-scrollbar {
      height: 5px;
    }
    &::-webkit-scrollbar-track {
      background: #F1F1F1;
    }
    &::-webkit-scrollbar-thumb {
      background: #BCBCBC;
    }
  }
}

9-17行目

スクロールバーの設定なので必須ではありませんが、あったほうがきれいに見えます。

最低限だけ書いていますので、良いように肉付けしてください。

これで横スクロールしてくれるTableの実装が完了です！

# caution

iOSでスクロールバーが初期段階で表示されない問題がありますが、iOS側の問題でcssでは解決不可能です。