Adding Styles to RTE

[formis17]

I am using 5.4. I'm attempting to add a style to the drop down style box on the rte. I followed the instructions found on http://docs.adobe.com/docs/en/cq/5-4/administering/configuring_rich_text_editor.html. After adding the node under text/rtePlugins/styles/styles, all of the options for the plugin are disabled. The buttons (such as the bold, italics, underline, etc...) are no longer clickable. While I can still select styles from the paraformat and style drop downs, they do not change the appearance of my text. Moreover, although I can change the text in the rte, the changes are not reflected in the page after I click ok. 

I have attached a snapshot of my node hierarchy for the dialog node. Please let me know if I should include any other information.

Thanks!

[Ove_Lindström]

If you remove the styles node, does it work then?

What is the types of the different styles nodes?

/Ove

[formis17]

It works with both styles nodes. It is when I try to add a node underneath of the second styles node (text/rtePlugins/styles/styles/NEWNODE) that the problem occurs. After I remove that node, the rte works as expected, but with no options in the style drop down menu.

The first style node (text/rtePlugins/styles) is type nt:unstructured. The second style node (text/rtePlugins/styles/styles) is type cq:WidgetCollection. The final node (text/rtePlugins/styles/styles/NEWNODE) is type nt:unstructured. 

[Ove_Lindström]

Can you post how the properties of the styles property that you add under the second styles node.

/Ove

[Sham_HC]

formis17 wrote...

It works with both styles nodes. It is when I try to add a node underneath of the second styles node (text/rtePlugins/styles/styles/NEWNODE) that the problem occurs. After I remove that node, the rte works as expected, but with no options in the style drop down menu.

The first style node (text/rtePlugins/styles) is type nt:unstructured. The second style node (text/rtePlugins/styles/styles) is type cq:WidgetCollection. The final node (text/rtePlugins/styles/styles/NEWNODE) is type nt:unstructured. 

Are you using any external stylesheet?  Any javascript error in browser console?

[formis17]

Ove Lindström wrote...

Can you post how the properties of the styles property that you add under the second styles node.

/Ove

<footnote
                 jcr:primaryType="nt:unstructured"
                 c_x0020_ssName="footnote"
                 text="Footnote"/>

[formis17]

Sham HC wrote...

Are you using any external stylesheet?  Any javascript error in browser console?

I am using an external stylesheet. I reference it in the text node:

externalStyleSheets="[/etc/designs/.../css/screen.css]"

This is the only js error in the browser console: Uncaught TypeError: Cannot read property 'length' of undefined. However, I don't think it has anything to do with the rte.

[Sham_HC · Accepted solution]

formis17 wrote...

Sham HC wrote...

Are you using any external stylesheet?  Any javascript error in browser console?

I am using an external stylesheet. I reference it in the text node:

externalStyleSheets="[/etc/designs/.../css/screen.css]"

This is the only js error in the browser console: Uncaught TypeError: Cannot read property 'length' of undefined. However, I don't think it has anything to do with the rte.

I am pretty sure from javascript error you have external site stylesheet Or font using in the page and hence breaking it. (External means not served from cq and hence cross origin issue)   As an workaround modify or overlay richtext.js where you have rules.length with try/catch & to be specific [1] .

[1]

try{
rules = styleToCheck.cssRules;
ruleCnt = rules.length;
}
catch(err){
ruleCnt=0;
}