テキストエリアの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>
コード: 全て選択
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があったら、お客さんへの説明も楽になるので大変うれしいです。
皆さんは、どうお考えになりますか?