[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

LVL 11
acsevenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

aolineCommented:
Where do you need them in the HTMLArea RTE drop down?
0
acsevenAuthor Commented:
style selectors
0
aolineCommented:
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
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

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

Check the pictures attached please.
rte01.jpg
rte02.jpg
rte03.jpg
0
aolineCommented:
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.
0
acsevenAuthor Commented:
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
0
acsevenAuthor Commented:
Also, it doesn't appear at typo3.org/extensions.
0
aolineCommented:
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
0
acsevenAuthor Commented:
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).

0
acsevenAuthor Commented:
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.
0
acsevenAuthor Commented:
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

0
aolineCommented:
My troublshooting code is below:

[HTMLArea::init]: All scripts successfully loaded.
[HTMLArea::init]: Editor url set to: /typo3/sysext/rtehtmlarea/htmlarea/
[HTMLArea::init]: Editor skin CSS set to: /typo3/sysext/t3skin/rtehtmlarea/htmlarea.css
[HTMLArea::init]: Editor content skin CSS set to: http://parentchildclub.com/typo3/sysext/t3skin/rtehtmlarea/htmlarea-edited-content.css
[HTMLArea::generate]: Toolbar successfully created.
[HTMLArea::generate]: Editor iframe successfully created.
[HTMLArea::initIframe]: Iframe baseURL set to: http://parentchildclub.com/typo3/
[HTMLArea::initIframe]: Skin CSS set to: http://parentchildclub.com/typo3/sysext/t3skin/rtehtmlarea/htmlarea-edited-content.css
[HTMLArea::initIframe]: Override CSS set to: http://parentchildclub.com/typo3temp/rtehtmlarea_css_99fd5988365fe77b05e2bf1c2be26112.css
[HTMLArea::initIframe]: Content CSS set to: http://parentchildclub.com/fileadmin/css/rte.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://parentchildclub.com/typo3temp/rtehtmlarea_htmlarea_c072451f9b892f6ee4431cb42d17b0c0-compressed.js Line: 2"] Retrying...
[HTMLArea::initIframe]: Stylesheets successfully loaded.
[HTMLArea::initIframe]: Design mode successfully set.
[HTMLArea::initIframe]: All plugins successfully generated.

Seems to be similar to yours.

There may be a cache issue with the code.

Delete all files beginning with rtehtmlarea* in your typo3temp folder and see if that helps.

Matthew
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
acsevenAuthor Commented:
It is not abandoned, I will return as soon as I have time to resume this matter, sorry.

Thank you for your patience.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.