Здравствуйте!
Есть такой WYSIWYG редактор TinyMCE (http://tinymce.moxiecode.com). У него есть свой CSS-файл (назовем его tinymce.css), с помощью которого можно настроить вид текста внутри области редактирования этого редактора. И нужно сделать так, чтобы на странице сайта, добавленный через TinyMCE текст выглядел так же, как он выглядит в окне редактирования.
Дело осложняется тем, что TinyMCE генерирует HTML-код с «простыми» тегами - <p>, <ul>, <li>... в которых нет свойства class. Таким образом, файл tinymce.css переопределяет глобально внешний вид всех используемых тегов.
Вот его содержание:
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}
body {background:#FFF;}
p, span { margin: 0; padding: 0; }
body.mceForceColors {background:#FFF; color:#000;}
h1 {font-size: 2em}
h2 {font-size: 1.5em}
h3 {font-size: 1.17em}
h4 {font-size: 1em}
h5 {font-size: .83em}
h6 {font-size: .75em}
.mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
a.mceItemAnchor {display:inline-block; width:11px !important; height:11px !important; background:url(img/items.gif) no-repeat 0 0;}
td.mceSelected, th.mceSelected {background-color:#3399ff !important}
img {border:0;}
table {cursor:default}
table td, table th {cursor:text}
ins {border-bottom:1px solid green; text-decoration: none; color:green}
del {color:red; text-decoration:line-through}
cite {border-bottom:1px dashed blue}
acronym {border-bottom:1px dotted #CCC; cursor:help}
abbr {border-bottom:1px dashed #CCC; cursor:help}
/* IE */
* html body {
scrollbar-3dlight-color:#F0F0EE;
scrollbar-arrow-color:#676662;
scrollbar-base-color:#F0F0EE;
scrollbar-darkshadow-color:#DDD;
scrollbar-face-color:#E0E0DD;
scrollbar-highlight-color:#F0F0EE;
scrollbar-shadow-color:#F0F0EE;
scrollbar-track-color:#F5F5F5;
}
img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
font[face=mceinline] {font-family:inherit !important}
И чтобы сайт не разлезся после применения таких свойств, в HTML-коде страницы сайте надо делать так:
1. ... Код сайта ...
2. Инклюд tinymce.css
3. Текст, отформатированный в TinyMCE
4. Нечто, что отменяет правила, заданные в tinymce.css
5. ... Код сайта ...
Вот я и теряюсь в догадках, что можно сделать в пункте 4? Это основной вопрос.
Второй вопрос - что имеется в виду в следущем куске документации:
TinyMCE specific rules
The body element of a TinyMCE instance has it's own class called mceContentBody this can be used to add TinyMCE specific CSS rules to your site's css.
/* Site rules */ body { background: #000 url('somebg.gif'); } /* TinyMCE specific rules */ body.mceContentBody { background: #FFF; } .mceContentBody a { color: red !important; /* FF requires a important here */ }
Тут вроде идет речь о том, как прописать CSS-правила TinyMCE в общий css-файл. То есть, через класс-селектор ceContentBody можно настроить вид текста в окне редактирования TinyMCE. Но совершенно непонятно, что делать с выводом текста, созданного в TinyMCE, чтобы он выглядет так же, как и в TinyMCE. Я правильно понял?
В общем, в первую очередь интересует практичный ответ на первый вопрос.
