【freo】TinyMCEでspanが挿入されるのを防ぐ【Tips】

追記

どうやらtinymceのバグらしいですが、今現在(2018年頭)も直っていません。

そして影響が出るのはChromeだけとか。

なんかChromeさんいろんなところで地味にバグ影響起こしてますね……

これを機に火狐さんに戻ろうかしら……

はじめに

まず、当記事で想定しているspanが勝手に挿入される状況というのは、TinyMCEでCSSを読み込ませている場合、特定条件下でリスト化(メニューのボタン)した際に<span style="hoge">foo</span>というspanタグが挿入されることを指します。

この方法はやや強引なやり方かもしれませんし、もっといい方法があるかもしれません(そもそもCSSにコードが影響されないような設定があるのかもしれません。というかあって欲しい)

そしてこの現象がバグなのか仕様なのかはわかりません。

CSSの読み込ませ方法

.js内の設定記述にcontent_css : "main.css"

content.css内に@import "main.css"

どちらの読み込ませても発生。

CSSの内容

p {hoge} or body

CSSにp{ line-height: 2;}がある場合、<p>いい天気</p><ul><li>いい天気</li></ul>に変換しようとすると、<ul><li><span style="line-height: 2;">いい天気</span></li></ul>になる。

回避方法

TinyMCEの設定記述に下記を追記。

extended_valid_elements : "span[!class]",

これを追記することにより、<span class="hogehoge">以外のspanタグは削除される。

弊害

メニューから文字の色を変更しようとすると<span style="color: #333333">のようにstyleで挿入されるため、上記の記述により削除される。

色を変更したい場合はclassを振る必要がある。ということはあらかじめ必要な色はCSSに登録しておくことが必要となる。

他にもstyleで指定するものは下記のように各所classを振る必要が発生する。

CSS内

.font_blue {color: #3366ff;}<br />.font_red {color: #ff0000;}

TinyMCE設定記述

theme_advanced_buttons1: 'styleselect',<br />style_formats : [
{title : '文字_青', inline : 'span', classes : 'font_blue'},
{title : '文字_赤', inline : 'span', classes : 'font_red'},
],
コメント
※コメントは承認制となっていますので、コメントを頂いても直ぐには表示されません。
※不適切な内容(スパムや悪意ある内容等)のコメントは公開されませんので、ご了承ください。
※返信が必要な場合などでコメントの公開を通知されたい場合はメールアドレスの入力をお願いします。
名もなき名無しさん
メールアドレス(例:コメントの公開通知が欲しい場合)
内容