LINUX.ORG.RU

Как применить CSS-правила, а потом отменить?


0

0

Здравствуйте!

Есть такой 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. Я правильно понял?

В общем, в первую очередь интересует практичный ответ на первый вопрос.

я могу ошибаться, поскольку давно дело было, но tinymce генерирует iframe и подсасывает стиль сам(т.е. не надо его подключать, надо только указать при инициализации). и стиль, соответственно, применяется только к его фрейму.

iSage ★★★★ ()
Ответ на: комментарий от iSage

Действительно можно завернуть в iframe. Другой вариант завернуть в div с классом tinymce, а перед всеми css селекторам дописать .tinymce

anonymous ()
Ответ на: комментарий от anonymous

Мне просто казалось что тайни и так сам в фрейм/див заворачивает.

iSage ★★★★ ()

Тольки динамически через кор или высокоуровневые обертки вроде jquqey.

libre ()
Ответ на: комментарий от anonymous

да, самый правильный путь - добавить класс tinymce к контейнеру с контентом.

ну и ещё - можно сам tinymce наконфигурячить так что будет выдавать сразу со стилями..только размер итоговый будет намного больше, так что проще через css

vene4ka ()
Ответ на: комментарий от iSage

да, tinyMCE создает ифрейм и фигачит все туда. Несколько раз применял его, всё было норм с вёрсткой

iMp ★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.