asked on

[TYPO3] RTE classes customization

Hi,

What is wrong with this Page TSConfig?

I want both "titulo_obra" and "desc_obra" to appear on the drop down selectors, but I had no luck so far!

Thanks

RTE.default.contentCSS = fileadmin/templates/css/rtestyles.css
 
 
#######################################
## SETUP DROPDOWNS IN RTE
#######################################
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;
}
 
csc-frame-frame1 {
name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:frame-frame1
value = background-color: #EDEBF1; border: 1px solid #333333;
}
 
csc-frame-frame2 {
name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:frame-frame2
value = background-color: #F5FFAA; border: 1px solid #333333;
}
 
important {
name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:important
value = color: #8A0020;
}
 
name-of-person {
name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:name-of-person
value = color: #186900;
}
 
detail {
name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:detail
value = color: #186900;
}
 
component-items {
name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:component-items
value = color: #186900;
}
 
action-items {
name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:action-items
value = color: #8A0020;
}
 
component-items-ordered {
name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:component-items
value = color: #186900;
}
 
action-items-ordered {
name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:action-items
value = color: #8A0020;
}
 
titulo_obra {
name = titulo_obra
value = color: #000000;
}
 
desc_obra {
name = desc_obra
value = color: #000000;
}
}
 
 
##################################
## SETUP CLASSES
###################################
 
 
 
 
 
 
 
 
 
## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
ignoreMainStyleOverride = 0
 
proc.allowedClasses (
external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
align-left, align-center, align-right,
csc-frame-frame1, csc-frame-frame2,
component-items, action-items,
component-items-ordered, action-items-ordered,
important, name-of-person, detail, titulo_obra, desc_obra
)
 
## classesParagraph, classesTable, classesTD, classesLinks, classesCharacter
## Classic RTE: Specify the list of class selectors that should be presented in the RTE interface:
## htmlArea RTE: Restrict the list of class selectors presented by the RTE to the following:
classesParagraph (
align-left, align-center, align-right, 
csc-frame-frame1, csc-frame-frame2
titulo_obra, desc_obra
)
 
classesTable = csc-frame-frame1, csc-frame-frame2
 
classesTD = align-left, align-center, align-right
 
classesLinks = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail
 
classesCharacter = important, name-of-person, detail, titulo_obra, desc_obra
 
## Configuration of the anchor accessibility feature (htmlArea RTE only)
 
## 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
}

Open in new window

aoline

Where do you need them in the HTMLArea RTE drop down?

acseven

ASKER

style selectors

aoline

I couldn't get your code to work either not sure why.

What I do to get my styles in the dropdown is this - very simple:

#use custom css
RTE.default.contentCSS = fileadmin/css/rte.css
RTE.default.showTagFreeClasses = 1

The RTE dropdown list then shows the name of my class. So for example if in my rte.css file I have

.red {color:red}

Then the dropdown shows the name 'red' as the style

HTH
Matthew

acseven

ASKER

I can't make it appear... :S

Check the pictures attached please.
rte01.jpg
rte02.jpg
rte03.jpg

aoline

You need to click into the RTE paragraph for the dropdowns to activate.

If they don't activate there is a TSconfig syntax configuration error or a browser cache error.

1) Click into the text to see if this activates the dropdown.
2) Clear the browser cache and re-save the content object and then click into the text again.
3) Make sure you remove all your other RTE changes so the config is as clean as possible ie only my 2 lines and click back into the RTE text to see if the dropdown is activated.

RTE.default.contentCSS = fileadmin/css/rte.css
RTE.default.showTagFreeClasses = 1

4) the bad news....there is a problem with the new RTE. I tested this code yesterday at work on an older installation of TYPO3 4.1.1 but on a newer installation 4.1.5 for example the same code does not work. So there is a bug. What version of TYPO3 are you testing this on?

See: http://bugs.typo3.org/view.php?id=3983

So by downgrading to v1.5.2 or lower you can get your code to work.

Go into your extension manager, Import the 'rtehtmlarea' and choose the latest version available which is v1.4.4 and use that version instead. I have no idea why it is only 1.4.4 and not 1.5.5 as in my installation.

Problem solved. Enjoy.

acseven

ASKER

Hi, thanks for the reply.

I'm using TYPO3 4.1.1. and rtehtmlarea 1.5.2.

I can't make it work. Check the annex code (I turned on troubleshooting on the extension, could you check your output).

Also, where can I find any 1.4.x or 1.5.x rtehtmlarea EXT?? It doesn't appear via the import tool.

[HTMLArea::init]: All scripts successfully loaded.
[HTMLArea::init]: Editor url set to: /typo3/sysext/rtehtmlarea/htmlarea/
[HTMLArea::init]: Editor skin CSS set to: /typo3conf/ext/skin_grey_2/rtehtmlarea/htmlarea.css
[HTMLArea::init]: Editor content skin CSS set to: http://**URL**/typo3conf/ext/skin_grey_2/rtehtmlarea/htmlarea-edited-content.css
[HTMLArea::generate]: Toolbar successfully created.
[HTMLArea::generate]: Editor iframe successfully created.
[HTMLArea::initIframe]: Iframe baseURL set to: http://**URL**/typo3/
[HTMLArea::initIframe]: Skin CSS set to: http://**URL**/typo3conf/ext/skin_grey_2/rtehtmlarea/htmlarea-edited-content.css
[HTMLArea::initIframe]: Override CSS set to: http://**URL**/typo3temp/rtehtmlarea_css_dffac98b3175880c8c50347c30aeac2a.css
[HTMLArea::initIframe]: Content CSS set to: http://**URL**/fileadmin/templates/css/yyyyyyyyy-v1-st02-rtestyles.css
[HTMLArea::initIframe]: Editor iframe head successfully initialized.
[HTMLArea::initIframe]: Failed attempt at loading stylesheets: [Exception... "A parameter or an operation is not supported by the underlying object" code: "15" nsresult: "0x8053000f (NS_ERROR_DOM_INVALID_ACCESS_ERR)" location: "http://**URL**/typo3temp/rtehtmlarea_htmlarea_1d4eebe7d2998457691a2fadfbe98397.js Line: 1076"] Retrying...
[HTMLArea::initIframe]: Stylesheets successfully loaded.
[HTMLArea::initIframe]: Design mode successfully set.
[HTMLArea::initIframe]: All plugins successfully generated.

Open in new window

rte04.jpg

acseven

ASKER

Also, it doesn't appear at typo3.org/extensions.

aoline

It only comes bundled with the new v4 versions of TYPO3 but I have uploaded a working version here for you. Just import that into your extension manager:

http://www.aoline.com/typo3/T3X_rtehtmlarea-1_5_2-z-200802050722.t3x

Matthew

acseven

ASKER

Hi,

1.5.2 was the version I had installed. I even tried 1.4.4. that I got from another installation, but still no go.

This is getting annoying. :S

Could you please post what does the "troubleshooting" info at your installation reports? (note: the error that appear in mine is caused by firefox (gecko browsers), but IE doesn't work either, though it doesn't appear any errors).

acseven

ASKER

Another thing is that if I have any contentCSS (below) activated, none of the selectors will display the common options.

#use custom css
RTE.default.contentCSS = fileadmin/css/rte.css
RTE.default.showTagFreeClasses = 1

If I remove the code, the common settings appear.

acseven

ASKER

Hi again,

Let me say first off that I am just waiting for the other question to be closed in order for me to raise this question to 500 pts. You'll get a A answer even if we don't get to a solution.

This is my latest test:

I placed the common (Normal RTE settings) css styles in my css file (see code below)

1.-
2. This line stayed the same. It appears and functions normally in the RTE;
3. The name-of-person was kept from original settings, but color was changed. The tag works and the color applied is #000000, so it works
4. This line is totally new, and it doesn't show.
5. this line has been commented out and it does NOT appear in the RTE, so it is working.

help?

/* Three inline text colors taken from the color scheme of CSS Styled Content extension.*/
span.important { color: #8A0020; }
span.name-of-person { color: #000000; }
span.thisdoesnotshow { color: #10007B; }
/*span.detail { color: #186900; }*/

Open in new window

ASKER CERTIFIED SOLUTION

aoline

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

acseven

ASKER

It is not abandoned, I will return as soon as I have time to resume this matter, sorry.

Thank you for your patience.