Adding Styles to RTE | Community
Skip to main content
formis17
formis17
Level 2
October 16, 2015
Solved

Adding Styles to RTE

  • October 16, 2015
  • 7 replies
  • 2042 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Sham_HC

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;
}

7 replies

O
Ove_Lindström
Level 6
October 16, 2015

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

What is the types of the different styles nodes?

/Ove

formis17
formis17Author
Level 2
October 16, 2015

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. 

O
Ove_Lindström
Level 6
October 16, 2015

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

/Ove

Sham_HC
Sham_HC
Level 10
October 16, 2015

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
formis17Author
Level 2
October 16, 2015

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
formis17Author
Level 2
October 16, 2015

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
Sham_HCAccepted solution
Level 10
October 16, 2015

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;
}

Terms & ConditionsAccessibility statement

Loading footer...