Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

How to enable Style Plugin in RTE for content fragments

Avatar

Level 2

I am working on 6.5 AEM and using RTE for Content fragment. I don't see the style plugin in RTE editor, image added below. Please let me know how I can enable Style plugin in RTE editor for content fragments.

I went through some of the blogs saying to override StyledTextEditor.js and update inline section to enable any missing plugin but I could not find what value I should update to enable style plugin.

 

maddy_23_0-1717473947931.png

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 6

styles should be added in few other places as well

"multieditorFullscreen": {
 "toolbar": [
"#styles",
]
 "styles": {
                "ref": "styles",
                "items": "styles:getStyles:styles-pulldown"
           }
}
 
  "uiSettings": {
  "inline": {
 "toolbar": [
"#styles",
]
 "popovers": {
   "styles": {
                "ref": "styles",
                "items": "styles:getStyles:styles-pulldown"

              }
}
}
}
Hoping this will help you.

View solution in original post

7 Replies

Avatar

Level 6

Hi ,

Inside StyledTextEditor,

add property "styles" inside

"rteplugins" {

 "styles": {
          "features": "*",
          "styles": {
            "eyebrow": {
              "text": "Eyebrow",
              "cssName": "eyebrow"
            },
      }

}

 
In this way u have to add styles, let me knwo if u still face issues.
Thank u.

Avatar

Level 6

And, for the clientlibs with StyledtextEditor.js give categories as 

dam.cfm.authoring.contenteditor.v2 this. which is same as of libs/styledtexteditor.js clientlib category.

Avatar

Level 2

@Keerthi0555  I updated StyledTextEditor.js like below 

"rtePlugins": {
"styles": {
"features": "*",
"styles": {
"eyebrow": {
"text": "Eyebrow",
"cssName": "eyebrow"
},

..

 

and tried both "#styles" or "styles#eyebrow"

in uiSettings like below

"uiSettings": {
"cui": {
"additionalClasses": {
"fullscreenstart": {
"classes": "",
"command": "fullscreen#start"
}
},
"inline": {
"toolbar": [
"#format",
"#justify",
"#lists",
"#styles",

.

.

.
}

},

 

But still, it's not working. Do you have working StyledTextEditor.js with style plugin. 

Avatar

Correct answer by
Level 6

styles should be added in few other places as well

"multieditorFullscreen": {
 "toolbar": [
"#styles",
]
 "styles": {
                "ref": "styles",
                "items": "styles:getStyles:styles-pulldown"
           }
}
 
  "uiSettings": {
  "inline": {
 "toolbar": [
"#styles",
]
 "popovers": {
   "styles": {
                "ref": "styles",
                "items": "styles:getStyles:styles-pulldown"

              }
}
}
}
Hoping this will help you.

Avatar

Administrator

@maddy_23 I hope you found the AEM community helpful. We look forward to your return as either a learner or a contributor. The community thrives with SMEs like you. Please encourage your AEM peers to join and contribute. Happy AEM learning!



Kautuk Sahni