08/201322

【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 {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'}, ],

関連エントリー

【freo】関連エントリープラグインでエラー【MySQL 5.7】

先日、うちのサイトをMySQL5.5から5.7に変更したんですけど、どうやら一...

2018/07/25
【freo】メディア一括表示プラグインを指定数のみ表示する【プラグイン】

※ただしsmarty3限定 freoで新着メディアを表示したい場合、たぶん...

2018/04/11
【JS】HighSlideに必要なコードを自動挿入【jQuery】

どうもこんにちは、うちのサイトではサムネイル表示の画像リンクにHighSlid...

2018/03/01
【freo】メディア登録(タグ機能追加版)【改造】

どうも、freoのメディア登録ってメディアの説明を入力するところはあっても、タ...

2018/01/04
【正規表現】英文以外の半角スペースを排除

とある事情により、日本語英語混在の文で半角スペースを排除する正規表現を探してい...

2017/12/08
SSL化予定

最近絵の記事が全くない御堂です。 てめぇ本当に絵描か? それはさておき...

2017/08/18

コメント

  • コメントはまだありません。

コメント登録

  • 閲覧制限 ※管理者のみにすると投稿者でも確認ができなくなります。

archive


×

ログイン