Редактор и стиль параграфа

[dapissarenko]

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

Я хочу, чтобы некоторые параграфы были с синим фоном. Вот так:

<div id="blueBackground">
...
</div>

blueBackground записан в stylesheet:

#blueBackground
{
	background:#c6d2f5;
}

Как мне сделать так, чтобы в редакторе (rich text editor) в списке стилей параграфов появлялся blueBackground?

У меня TYPO3 Ver. 4.0.3.

Заранее благодарен

Дмитрий

[filippoff]

RTE.default.useCSS = 1
RTE.default.contentCSS = fileadmin/templates/style.css
RTE.default.showTagFreeClasses = 1

[dapissarenko]

Спасибо за ответ!

Сообщение от filippoff

RTE.default.useCSS = 1
RTE.default.contentCSS = fileadmin/templates/style.css
RTE.default.showTagFreeClasses = 1

Где это надо писать?

Я безуспешно пробовал написать это

а) в константах шаблона,
б) в сетапе шаблона,
в) в разделе Backend Editor Configuration шаблона.

С уважением

Дмитрий

[dapissarenko]

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

Может быть, проблема в том, что у меня не RTE, а другой редактор?

Вот как у меня выглядит редактор:

http://dapissarenko.com/resources/20...orm/editor.png

С уважением

Дмитрий

[void]

У вас rtehtmlarea.

А приведённый выше код нужно писать в Page TS Config (находится в свойствах страницы).

[dapissarenko]

Спасибо за ответ!

Сообщение от void

А приведённый выше код нужно писать в Page TS Config (находится в свойствах страницы).

Сделал.

Но теперь списки Параграф (стиль параграфа) и Текст вообще отключены (grayed). Раньше я там мог что-то выбирать, а после того, как вставил

RTE.default.useCSS = 1
RTE.default.contentCSS = fileadmin/style.css
RTE.default.showTagFreeClasses = 1

в TSconfig той страницы - они перестали работать.

Если этот код оттуда убрать - снова работают.

Что делать?

Заранее благодарен

Дмитрий

[filippoff]

При необходимости записи TSconfig для редактора я делаю в свойствах корневой страницы сайта.

Пример настройки RTE:

-----------------------------
RTE >
RTE.default.enableWordClean = 1
RTE.default.disableEnterParagraphs = 1
RTE.config.tt_content.bodytext.showButtons = *
RTE.default.showButtons = *

RTE.default.useCSS = 1
RTE.default.showTagFreeClasses = 1
RTE.default.contentCSS = fileadmin/templates/style.css

RTE.default.proc {
allowTags = b,i,strong,em,table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, pre, blockquote, strong, em, a, img, hr, tt, q, cite, abbr, acronym, address, center, sub, sup
overruleMode = ts_css
dontConvBRtoParagraph = 1
internalizeFontTags = 1
allowTagsOutside = img,hr,address,sub,sup
denyTags = strike,font
entryHTMLparser_db = 1
entryHTMLparser_db {
allowTags < RTE.default.proc.allowTags
xhtml_cleaning = 1
htmlSpecialChars = 0
noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
tags.hr.allowedAttribs = class
tags.span.allowedAttribs = class
tags.div.allowedAttribs = align
tags.b.remap = strong
tags.i.remap = em
removeTags = sdfield
keepNonMatchedTags = protect
}
}
----------------------------

[dapissarenko]

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

Спасибо за ответ!

Сообщение от filippoff

При необходимости записи TSconfig для редактора я делаю в свойствах корневой страницы сайта.

Я сделал это и вид редактора изменился. Теперь он выглядит так:

http://dapissarenko.com/resources/20...rm/editor2.png

Список со стилями параграфа отключён.

Вопросы:

1) TYPO3 сам узнает из стайлшита, какие стили надо показывать, или мне надо где-то прописать, какие именно стили мне нужны в редакторе?

Стиль прописан вот так:

#blueBackground
{
	background:#c6d2f5;
}

2) Как мне сделать так, чтобы я мог в редакторе писать текст как показано ниже (т. е. чтобы редактор делал div) ?

<div id="blueBackground">Текст</div>

Спасибо

Дмитрий

[filippoff]

гм, ну да, редактор же сброшен :о) был неправ, вспылил. вернее, недописал.

вообще, за список стилей параграфа отвечает элемент classesParagraph. чтобы отобразить список ваших стилей пропишите

RTE.default.classesParagraph = style1, style2 - ваши стили.

Эти стили оборачивают текст в div, но не с идентификатором, а с классом.

cами стили определяются в RTE.classes:

RTE.classes {
style1 { - класс, который добавится к параграфу
name = Style 1 - имя, которое будет отображено в списке
value = font:bold; color:red; - собственно стиль
}
style2 {
name = Style 2
value = font:bold; color:black;
}
}

вроде так.

[dapissarenko]

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

Теперь мой стиль есть в списке и даже отображается правильно. Вот что я сделал:

TSConfig корневой страницы:

RTE.classes {

        align-left {

                name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft

                value = text-align: left;

        }

        align-center {

                name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter

                value = text-align: center;

        }

        align-right {

                name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright

                value = text-align: right;

        }
       sourceCode {

               name = Source code
               value = font-family: Courier;

       }

}

RTE.classesAnchor {

        internalLink {

                class = internal-link

                type = page

                image >

        }

        externalLink {

                class = external-link

                type = url

                image >

        }

        externalLinkInNewWindow {

                class = external-link-new-window

                type = url

                image >

        }

        internalLinkInNewWindow {

                class = internal-link-new-window

                type = page

                image >

        }

        download {

                class = download

                type = file

                image >

        }

        mail {

                class = mail

                type = mail

                image >

        }

}

RTE.default {
        contentCSS = fileadmin/css/rte.css


        enableWordClean = 1

        removeTrailingBR = 1

        removeComments = 1

        removeTags = center, sdfield

        removeTagsAndContents = style,script

 

#         Buttons die gezeigt/versteckt werden

        showButtons = textstyle, textstylelabel, blockstyle, blockstylelabel, bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, showhelp, about

        hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste

 

#         Hält die RTE Icons gegroupt zusammen

        keepButtonGroupTogether = 1

 

#         blendet Statusbar in htmlarea aus

        showStatusBar =  0

 

#         Add styles Left, center and right alignment of text in paragraphs and cells.

        inlineStyle.text-alignment (

                p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, td.align-left { text-align: left; }

                p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, td.align-center { text-align: center; }

                p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, td.align-right { text-align: right; }

        )

 
# Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)

        ignoreMainStyleOverride = 1

       

        proc {

#                 tags die erlaubt / verboten sind

                allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center

                denyTags = font

 

#                 br wird nicht zu p konvertiert

                dontConvBRtoParagraph = 1

 

#                 tags sind erlaubt außerhalt von p, div

                allowTagsOutside = img,hr

 

#                 erlaubte attribute in p, div tags

                keepPDIVattribs = align,class,style,id

 

 #                List all class selectors that are allowed on the way to the database

                allowedClasses (

                        external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
                        align-left, align-center, align-right, sourceCode
			

                )       

 

#                 html parser einstellungen

                HTMLparser_rte {

 

 #                        tags die erlaubt/verboten sind

                        allowTags < RTE.default.proc.allowTags

                        denyTags < RTE.default.proc.denyTags

 

#                         tags die untersagt sind

                        removeTags = font

 

#                         entfernt html-kommentare

                        removeComments = 1

 

#                         tags die nicht übereinstimmen werden nicht entfernt (protect / 1 / 0)

                        keepNonMatchedTags = 0

                }

 

 

#                 Content to database

                entryHTMLparser_db = 1

                entryHTMLparser_db {

 

#                         tags die erlaubt/verboten sind

                        allowTags < RTE.default.proc.allowTags

                        denyTags < RTE.default.proc.denyTags

 

#                         CLEAN TAGS

                        noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center

 

                        rmTagIfNoAttrib = span,div,font

 

                         htmlSpecialChars = 1

       

#                         align attribute werden erlaubt

                        tags {

                                p.fixAttrib.align.unset >

                                p.allowedAttribs = class,style,align

 

                                div.fixAttrib.align.unset >

 

                                hr.allowedAttribs = class

 

#                                 b und i tags werden ersetzt (em / strong)

                                b.remap = strong

                                i.remap = em

 

#                                 img tags werden erlaubt

                                img >

                        }

                }

 

        }

 

#         Classes: Ausrichtung

        classesParagraph (
                align-left, align-center, align-right, sourceCode

        )

 

#         Classes: Eigene Stile

        classesCharacter = author

        classesImage= rte_image

 

 

#         Classes für Links (These classes should also be in the list of allowedClasses)

        classesAnchor = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail

        classesAnchor.default {

                page = internal-link

                url = external-link-new-window

                file = download

                mail = mail

        }

 

#         zeigt alle CSS-Klassen die in formate.css vorhanden sind

        showTagFreeClasses = 1

 

#         Do not allow insertion of the following tags

        hideTags = font

 

#         Tabellen Optionen in der RTE Toolbar

        hideTableOperationsInToolbar = 0

        keepToggleBordersInToolbar = 1

 

#         Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)

        disableSpacingFieldsetInTableOperations = 1

        disableAlignmentFieldsetInTableOperations=1

        disableColorFieldsetInTableOperations=1

        disableLayoutFieldsetInTableOperations=1

        disableBordersFieldsetInTableOperations=0

}

 

# Use same processing as on entry to database to clean content pasted into the editor

RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db

 

# FE RTE configuration (htmlArea RTE only)

RTE.default.FE < RTE.default

RTE.default.FE.userElements >

RTE.default.FE.userLinks >

 

# Breite des RTE in Fullscreen-Ansicht

TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 80%

rte.css (стайлшит для редактора):

.sourceCode { font-family: Courier; }

span.sourceCode { font-family: Courier; }

p.sourceCode { font-family: Courier; }

sourceCode { font-family: Courier; }

В стайлшите страницы стоит:

p.sourceCode { font-family: Courier; background-color: #b6ccf3; }

Продолжение следует...