Tinymceにcss適用後の動作について  【解決済み】

質問全般・改善要望
返信する
mmc
メンバー
メンバー
記事: 13
登録日時: 2013年5月11日(土) 03:44

Tinymceにcss適用後の動作について

投稿記事 by mmc »

Modxのバージョン:MODX Evolution 1.0.10J

「ツール」「グローバル設定」「管理画面の設定」からリッチテキストエディタを使用するを選び、TinyMCEを選択、「cssのファイルへのパス」にmce.cssを設定しました。
mce.css

コード: 全て選択

p {text-indent: 1em;}
リソース作成にて記事を作成し、<p>タグで囲まれた文章の一部をリスト(<ul>)にすると、<li>にcssで設定したスタイルが勝手に挿入されてしまいます。
変更前

コード: 全て選択

<p>リスト1</p>
<p>リスト2</p>
<p>リスト3</p>
変更後

コード: 全て選択

<ul>
<li><span style="text-indent: 1em;">リスト1</span></li>
<li><span style="text-indent: 1em;">リスト2</span></li>
<li><span style="text-indent: 1em;">リスト3</span></li>
</ul>
希望の出力

コード: 全て選択

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
TinyMCEの仕様で動作としては正しいでしょう。(元のpタグにインデントがかかっているのだからそれを元にしたリストもインデントしよう)
ですが、今回はここまで求めていません。
不要なタグを出力しない方法はあるでしょうか。

------
今回、Modxに移行中のサイトはサイト作成者がhtmlタグを打ちこみサイトを作成していました。

コード: 全て選択

<p>(全角スペース)本文</p>
のように、すべての<p>タグの先頭に全角スペースが入っていてインデントをかけています。
また、リストは

コード: 全て選択

<p>(全角スペース)本文<br>
1、リスト1<br>
2、リスト2<br>
3、リスト3<br><br>
(全角スペース)本文続き</p>
このように作成されています。

この方に、メモ帳などで記事を書き、コピーしてModxの本文にペースト、その後文字を選んでボタンを押すだけでリストになりますよ。インデントも自動で入りますよ。と教えたいと思っていたのですが、このようなタグが出力されるとなにもしないほうがましなのかな。とも思います。
(リストにした後に「消しゴム」のおまじないをしてください。などとは言いたくありません)
CSSファイルを使わなければ投稿画面でインデントがかからないため、全角スペースを無理に入れるであろうと考えますし、常にどの文書にもインデントをかけている方なので投稿画面でインデントがなければストレスであろうと考えます。

CSSのファイルへのパスはあくまで投稿画面上の見た目だけだと思っていたので、私がTinyMCEを正しく使っていない可能性もあります。

Modxのバグ、要望というよりもTinyMCEの使い方、仕様だとは思うのですが、他に相談できるところもないのでこちらに投稿させてもらいました。
よろしくお願いいたします。
kazuike
メンバー
メンバー
記事: 507
登録日時: 2009年8月12日(水) 12:53

Re: Tinymceにcss適用後の動作について

投稿記事 by kazuike »

mmc さんが書きました: リソース作成にて記事を作成し、<p>タグで囲まれた文章の一部をリスト(<ul>)にすると、<li>にcssで設定したスタイルが勝手に挿入されてしまいます。
変更前

コード: 全て選択

<p>リスト1</p>
<p>リスト2</p>
<p>リスト3</p>
変更後

コード: 全て選択

<ul>
<li><span style="text-indent: 1em;">リスト1</span></li>
<li><span style="text-indent: 1em;">リスト2</span></li>
<li><span style="text-indent: 1em;">リスト3</span></li>
</ul>
ちょっと気になったので、
以下のデモサイトで試してみました。

http://130607155902-25129.evo.demo.modx.jp/manager/

IE10とFirefoxで、下記のように色々選択範囲を変えてみて、再現できなかったのですが、
どのような操作をされたときに、こうなりますでしょうか?

・全体(3段落)を選択
・段落単位で選択(先頭、中間、最終、先頭2段落、最終2段落)
・文字単位で選択(先頭1文字、中間1文字、最終1文字、段落をまたがって)
※範囲選択後に、「番号なしリスト」ボタンをクリック
▼ウェブ屋のCMS→modxヒキダス流(備忘録)
http://d.hatena.ne.jp/hikidas_ikeda/
mmc
メンバー
メンバー
記事: 13
登録日時: 2013年5月11日(土) 03:44

Re: Tinymceにcss適用後の動作について  【解決済み】

投稿記事 by mmc »

kazuike様

返信ありがとうございます。

使用しているブラウザはGoogle Chromeです。
そして、IE、firefoxにて、タグが入らないことを確認しました。

私が使用しているModxではCSSのON・OFFにて現象が現れる為、それが原因だと思い込んでしまいました。
用意していただいた環境では、CSSのON・OFFに関係なくタグが入ってしまうようです。

ブラウザ依存とはまったく思っていなかったため助かりました。
テキスト編集はGoogle Chromeを使わないことで解決しそうです。
ありがとうございました。
返信する