【備忘録】TinyMCE Advancedで作成した表にwidthとheightを追加しなくする方法

ホーム
Wordpress, 雑記帳
【備忘録】TinyMCE Advancedで作成した表にwidthとheightを追加しなくする方法

【備忘録】TinyMCE Advancedで作成した表にwidthとheightを追加しなくする方法

TinyMCE Advanced はビジュアルエディターを使う際にとても便利なプラグインです。特に表を作成する時に重宝するのですが、勝手に width と height を追加してしまうのでスマホの画面を確認した場合体裁がおかしくなる場合があります。ここでは width と height の追加を無効にする方法を備忘録としてまとめました。

コンテンツ

1 プラグイン名称
2 発生した課題
3 対応内容
4 プラスアルファの対応

プラグイン名称

名称：TinyMCE Advanced

発生した課題

エクセルで作った表をビジュアルエディタにコピペし、ヘッダーセルの設定と、データセルは横配置＝中央と縦配置＝Middleを設定しました。

保存し、クロームのデベロッパーツールで表示を確認したところ右側に表が出っ張っているし、なんか縦方向にも間延びしてる？？？

WordPressのテキストエディターを確認したところ width と height が自動追加されていることが確認できました。最初は不要部分のみ手作業で削除していましたが、2次トラブルがひどかったので自動追加を無効にすることに決めました。

■具体的な処理例としたい事
例として作成したエクセルの表を b2:c4 の範囲でコピペし、先頭行をヘッダーセルに指定、セルは横配置＝中央と縦配置＝Middleを指定します。実際に作成されたHTMLを確認すると以下の様になりました。

この、自動で設定されたwidthとheightを設定されない様にするのが今回の目的です。

対応内容

設定の中にあればいいなと思いながら調べてみましたが、それらしき項目はありませんでした。

最終的にはfunctions.phpに以下コードを追加しました。(忘れてしまいそうなので急きょ備忘録を作成しました・・・。)

// TinyMCE Advanced width,height 設定無し -----
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 Advanced width,height 設定無し -----

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);

functions.phpは特殊な設定をしていない限り、Webサイトのルート → wp-content → themes → 使用テーマフォルダ直下にあります。

手順は色々選べますが、私はオリジナルの functions.php → functions.org とリネーム、修正した functions.php をftpでアップロードしました。1つ注意するのは文字コードUTF-8で保存する必要があるのでメモ帳を使ってはダメです。私は TeraPad を使っています。

■対応の結果作成されたHTML