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

2022/04/012016/08/27

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

問題

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>

@bicstone

大石貴則 (Ōishi Takanori) と申します。 Webエンジニア / セキュリティスペシャリスト / 機械エンジニアです。プロダクトに幅広く携わり、相互成長し続けられるエンジニアを目指しています。

GitHub LinkedIn