08/201322

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

【もしかして13/08/22】

うまく動作していない可能性が出てきました。現在調査中です(´・ω・`)(もともとなんでこれでできるのか理解できていなかったんですけどね。明らかにこれじゃできないとは思っていましたし

はじめに

まず、当記事で想定している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'}, ],

関連エントリー

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

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

2017/12/08
【freo】メディア登録(タグ機能追加版)【改造】

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

2017/10/13
SSL化予定

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

2017/08/18
CSSの小技

今までの記事を統合しました。以後はこちらに追記していきます。 MENU ...

2014/05/10
【freo】TinyMCE 4 でのテーマの変更方法

別にfreoに限った話じゃないですけどね。TinyMCE4を実装しているところ...

2014/05/06
【freo】任意のページ内容を任意の箇所に表示【Tips】

freo1.10来ましたね。 それはそうと、freoってなんだかインフォメ...

2014/05/03

コメント

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

コメント登録

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

archive


×

ログイン