TinyMCEがTableタグに「width」と「height」を勝手に設定する機能を無効にする

はじめに

WordPress がアップデートされてから、TinyMCE が Table タグに「width」と「height」を勝手に設定する機能が追加されました。レスポンシブデザインのサイトにおいて、この機能はむしろデザインを崩す原因となってしまいます。この機能を無効にする方法をご紹介します。

問題

TinyMCE 4.3.3 以上(WordPress 4.5 以上)においてテーブルの境界線を一度でも触ってしまうと、TinyMCE は Table タグに「width」と「height」を勝手に設定します。
2×2のHTMLテーブルのスクリーンショット テーブルの枠線を触る テーブルの枠線をドラッグ中 
<table style="width: 150px;">
  <tbody>
    <tr>
      <td style="width: 10px;">テーブル</td>
      <td style="width: 118px;">テーブル</td>
    </tr>
    <tr>
      <td style="width: 10px;">テーブル</td>
      <td style="width: 118px;">テーブル</td>
    </tr>
  </tbody>
</table>

対処方法

TinyMCE のオプション、「table_resize_bars」を False に変更(初期値:True)し、「object_resizing」を「img」へ変更(初期値:True)します。

TinyMCE 単独で用いている場合

tinymce.init() の中に、下記のコードを追加します。
{
  table_resize_bars: false,
  object_resizing: img,
}

WordPress で用いている場合

functions.php などに次のコードを追加します。
<?php
function customize_tinymce_settings($mceInit) {
$mceInit['table_resize_bars'] = false;
$mceInit['object_resizing'] = "img";
return $mceInit;
}
add_filter( 'tiny_mce_before_init', 'customize_tinymce_settings', 0);
ちなみに、このコードを用いれば、TinyMCE のマニュアルを参考に他の設定もカスタマイズできます。

結果

テーブルの境界線を触っても何も起きません。
2×2のHTMLテーブルのスクリーンショット テーブルの境界を触っても、ドラッグアンドドロップできない 
<table>
  <tbody>
    <tr>
      <td>テーブル</td>
      <td>テーブル</td>
    </tr>
    <tr>
      <td>テーブル</td>
      <td>テーブル</td>
    </tr>
  </tbody>
</table>