【TinyMCE】table作成時の不要なwithを削除して任意のclassを付与しレスポンシブに対応させる方法

TinyMCEを使用してテーブルを作成すると、デフォルトで横幅が指定されており、若干使い勝手がよくありません。この不要な横幅の指定を削除し、さらに任意のclassを付与し、さらにレスポンシブにも対応する方法をご紹介します。コピペでいけるはず。

変更内容

TinyMCEで二行二列の表を作成すると下記のようなソースが生成されます。

<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>
</tr>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>
</tr>
</tbody>
</table>

これを下記のように変更したいと思います。

<div class="scroll">
<table class="table">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>

不要なwidth指定を削除し、tableタグのcalssに”table”を追加し、tableタグを<div class=”scroll”>で囲みます。

変更方法

function.phpの変更

『function.php』に下記を追記します。

//TinyMCEのstyle削除
function tinymce_custom($settings) {
$invalid_style = array(
'table' => 'width border-collapse',
'th' => 'width',
'td' => 'width'
);
$settings['invalid_styles'] = json_encode($invalid_style);
return $settings;
}
add_filter('tiny_mce_before_init', 'tinymce_custom', 0);

//tableタグにclass="table"を付与
function add_class_table($content){
$my_custom_class = "table";
$add_class = str_replace('<table>', '<table class="'.$my_custom_class.'">', $content);
return $add_class;
}
add_filter('the_content', 'add_class_table');

//tableタグを<div class="scroll">～</div>で囲う
function table_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<table/i', '<div class="scroll"><table', $the_content);
$the_content = preg_replace('/<\/table>/i', '</table></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','table_in_div');

CSSの編集

cssファイルに下記を追加します。

.scroll
overflow-x: scroll;
}

以上で完了です。

解説

function.phpではまず、TynyMCEのstyleの削除を行っています。

次にtableのclassですが、私の場合Bootstrapを使う機会が多いため、classに「table」を付与しています。もちろん任意のものに変更していただいて結構です。

最後に<div class=”scroll”>で囲うことで、横幅が狭くなった時に、テーブルが横スクロールで表示できるようにしてあります。