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

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

※ これは2016-08-28に個人ブログで公開した記事を移植し、CC0-1.0で提供しています。情報は古い可能性があります。

問題

TinyMCE 4.3.3以上(WordPress 4.5以上)においてテーブルの境界線を一度でも触ってしまうと、TinyMCEはTableタグに「width」と「height」を勝手に設定します。

<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 のマニュアルを参考に他の設定もカスタマイズできます。

結果

テーブルの境界線を触っても何も起きません。

<table>
  <tbody>
    <tr>
      <td>テーブル</td>
      <td>テーブル</td>
    </tr>
    <tr>
      <td>テーブル</td>
      <td>テーブル</td>
    </tr>
  </tbody>
</table>