追記
どうやら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 {hoge}
例
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;}
.font_red {color: #ff0000;}
TinyMCE設定記述
theme_advanced_buttons1: 'styleselect',
style_formats : [ {title : '文字_青', inline : 'span', classes : 'font_blue'}, {title : '文字_赤', inline : 'span', classes : 'font_red'}, ],
関連エントリー
コメント
- コメントはまだありません。
