RTEのCSSについての要望、及び提案

質問全般・改善要望
返信する
アバター
ryota
メンバー
メンバー
記事: 46
登録日時: 2009年9月10日(木) 03:08

RTEのCSSについての要望、及び提案

投稿記事 by ryota »

TinyMCEやCKEditorを使用する際にいつも思うのが、
テキストエリアのCSSをbodyタグとしてではなく、本来[*content*]が入るブロック要素として認識させ、親要素にかかるCSSを継承し、レンダリングさせたいと言う事です。

勿論、RTE用にCSSを作れば良いと言う事でもあるのですが、bodyタグにid="[*alias*]"等を指定してあった場合等、
コンテンツによって本来表示される状態ではない状態になってしまいます。



HTMLテンプレート

コード: 全て選択

<body>
<div id="wrapper">
<h1>[*pagetitle*]</h1>
<div id="content" class="[*alias*]">
[*content*]
</div>
</div>
</body>
CSS

コード: 全て選択

body {
 color: #ffffff;
 text-align: center;
}

div#wrapper {
 width: 800px;
 margin: 0 auto;
 background: #000000;
 text-align: left;
}

div.blog {
 color: #aaffaa;
}

div.information {
 color: #00aaff;
}

bodyに対して、color: #ffffff;がかかっているので、RTE上だと文字も背景も真っ白になってしまいます。
また、div#wrapperのwidthを800pxにしてセンタリングする際にIE6対策でtext-align: center;それをdiv#wrapperでtext-align: left;で解除しています。
しかし、この状態だとRTE上ではtext-align: center;がかかった状態になってしまいます。
また、aliasがblogというリソースと、informationというリソースでフォントカラーを分けたい場合の処理も無効になってしまいます。
ですので、この場合のテキストエリアにデフォルトでかかっていて欲しいCSSは、

color: #ffffff; //(※リソースによる)
background: #000000;
text-align: left;

となる訳です。


中には無効にしないと管理画面の整合性がとれなくなるプロパティもあり(widthやposition等)、調整が面倒だとは思うのですが、実用レベルで実装出来たら素晴らしいと思います。


本来の見栄えと同じ状況でリソースが作れるRTEがあったら、お客さんへの説明も楽になるので大変うれしいです。

皆さんは、どうお考えになりますか?
株式会社ar | ar design studio
http://www.arweb.jp/
http://www.ar-st.net/
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: RTEのCSSについての要望、及び提案

投稿記事 by yama »

完全にそのようにすることはRTE側の事情でできないですが、
ryota さんが書きました:本来の見栄えと同じ状況でリソースが作れるRTEがあったら、お客さんへの説明も楽になるので大変うれしいです。皆さんは、どうお考えになりますか?
結果としてはそういうことはできます。実は本家には提案済みなんですが、意図が伝わってないのかまだ対応されてないです。あとでお試し版を作ってみるので、もしよければ確認してみてください。とりあえず背景は黒で。アプローチとしては、body#content というセレクタを仮想的に設定することで実現します。#contentの部分は任意に設定できます。

画像

画像

画像
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: RTEのCSSについての要望、及び提案

投稿記事 by yama »

さっきアップした日本語版リリース候補2に同梱してるTinyMCEを、この状態にしておきました。ちょっとコツが必要ですが、以下のような感じ。

まず基本的に、TinyMCEはその内容をbody直下のものとしてしか認識できません。これは仕方がないので諦めるしかないのですが、その代わり、この仮想的なbody要素に対してclassやIDを設定できます。で、今回は「body class="content"」として設定しました。これはハードコーディングではなくTinyMCEプラグイン編集画面の設定タブで設定しています。body_class : "content", だったかな。

で、このcontent領域専用のCSSファイルを作って、これをサイトとTinyMCEで共有できるような書き方を工夫します。要は、TinyMCE側ではbody.contentとして、サイト側ではdiv.contentとして認識できるように意識して書きます。実際、この使い方で問題なく運用できます。

今回から、TinyMCE用のCSSファイルをassets/plugins/tinymce/style/ ディレクトリに置くようにしました。今まではassets/site/ディレクトリに置いてました。また、このCSSファイルのロケーション設定を、今まではグローバル設定で設定していたのを、今回からTinyMCEプラグイン編集画面の設定タブで設定するように改めました。本当はグローバル設定に置くのがスマートなんですが、こういう使い方がこなれてない今の時点では、開発側としてはちょっと面倒なので・・今後の課題としたいと思います。今の時点では、TinyMCEの設定はできるだけTinyMCEの中で処理するのが分かりやすいのではと。

ちょっと脱線しましたが、assets/plugins/tinymce/style/content.css の中身を適当に編集して、背景黒・文字色白に簡単に設定できます。
アバター
yama
管理人
記事: 3236
登録日時: 2009年7月29日(水) 02:50

Re: RTEのCSSについての要望、及び提案

投稿記事 by yama »

コード: 全て選択

.content {
background: #000000;
text-align: left;
color: #ffffff;
text-align: center;
}
ryotaさんのCSSだと、これだけでOKだと思います。ここに含めなかったエントリーはサイト側のCSSに戻します。
要は、TinyMCEのtextareaの中の世界は「body.content」なわけです。
もう少し重み付けをしたい場合は、TinyMCE設定のbody_classという設定をbody_idに書き換えるとbody#idになるのでより確実です。ただし投稿画面中に複数のTinyMCE領域があると重複してしまうので厳密にはどうかという感じですが。(僕はあまり気にしない・・)
返信する