投稿・固定ページ編集画面で不用意なが挿入されてしまう場合の対処

投稿・固定ページ編集画面で不用意な<BR>が挿入されてしまうので、なぜかと調べたところTinyMCE　Advancedプラグインの設定を変更したためだったことが判明。その対処方法を伝授。

当ブログでは、投稿画面を使いやすくするため、TinyMCE AdvancedやPS Disable Auto Formattingプラグインを使用しています。ふと以前の投稿を確かめたところ、不用意な部分に改行タグ
が挿入されていました。投稿や固定ページ編集画面系のプラグインとして上記の２つを使用しています。原因をたしかめるため、これらのプラグインのON/OFFしながら状況を確認したところ、TinyMCE AdvancedプラグインのEditor-Style.cssが原因らしいことがわかった。

Editor-Style.cssでビジュアル画面の見た目を本番と同様にできるが

TinyMCE Advancedの設定オプションとして” Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.“というオプションがあります。このオプションにチェックをいれるとビジュアル画面用にeditor-style.cssを利用するようになり、見かけを本番と同様にすることが出来ます。

しかし、このeditor-style.cssを利用したため、インライン要素である<label>や<input>の後に、<BR>が挿入されることが判明。

オプションを使用する前のソース

<div class="filter-select-value">
  <label><input class="user-type1" name="user-type" type="radio" value="○" />新規</label>
  <label><input class="user-type2" name="user-type" type="radio" value="○" />MNP</label>
  <label><input class="user-type3" name="user-type" type="radio" value="○" />機種変更</label>
  <label><input class="user-type4" name="user-type" type="radio" value="○" />契約者</label>
</div>

オプション設定後のソース
<div class="filter-select-value">
        <label><br />
          <input class="user-type1" name="user-type" type="radio" value="○" /><br />
          新規</label><br />
        <label><br />
          <input class="user-type2" name="user-type" type="radio" value="○" /><br />
          MNP</label><br />
        <label><br />
          <input class="user-type3" name="user-type" type="radio" value="○" /><br />
          機種変更</label><br />
        <label><br />
          <input class="user-type4" name="user-type" type="radio" value="○" /><br />
          契約者</label><br />
 </div>

上記のようにオプションを設定する前と設定後に、不用意な<BR>の挿入や自動整形が施されています。この<BR>は、もう一つのオプションである”Stop removing the　and　tags when saving and show them in the Text editor“にチェックを入れることにより防ぐことができますが、スクリプトソースで自動整形までは防ぐことが出来ないようです。プラグインをつかわなくても投稿画面でJavaScript等を記述して実行することは可能ですが、ソースを自動整形されると動かなくなることもあり自動整形も防ぎたい。この問題を解消するためには、もう一つのプラグインPS Disable Auto Formattingを使用することにより解消しました。
この問題の解決方法
結局、以下のような方法でこの問題を解決しています。

Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.はチェックしない
Stop removing the　and　tags when saving and show them in the Text editorをチェックする
PS Disable Auto Formattingプラグインで自動整形を防ぐ

 注意！：当記事にした解決法は、不用意な<BR>挿入を禁止し、自動整形を防ぐの2点について記述したものです。これで完璧とは考えていませんが、とりあえずこの方法で当面使う事にしました。