Adding rich text formatting to a title component | Community
Skip to main content
SiriusRex
SiriusRex
Level 2
September 16, 2020
Solved

Adding rich text formatting to a title component

  • September 16, 2020
  • 4 replies
  • 2804 views

A designer on our team is asking us to modify our Title component to allow the use of bold formatting on part or all of the title. Bolding the whole thing would be easy enough, but it's the partial bolding of text that I can't figure out.

 

I've tried switching the field to richtext and then eliminating all plugins except the bold formatting. But the problem there is that now I have a huge text entry box and I can't figure out how to make it one line. 

 

I'm wondering if there's a different approach - all of the OOTB Title components don't allow rich text formatting, and none of them seem to have single line entry fields that allow rich text, either. 

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 SiriusRex

Ultimately, all I needed to do was create a data-attribute on the richtext node that I could target with authoring-specific CSS. The answers below all point to that, but I think maybe went in a direction that was too complex for what I was trying to do.

4 replies

Vijayalakshmi_S
Vijayalakshmi_S
Level 10
September 16, 2020

Hi @siriusrex,

Rich text editor has a predefined height set in OOB CSS via height and padding properties.

Now per your use case to reduce it to one line height or for a look alike of text field, you can write CSS overwriting the same. 

To target specifically without affecting all richtext resource in general, within dialog content markup we have an hidden field capturing sling:resourceType which will have the value as component path of respective dialog. (screenshot #1)

Using this as an identifier, am suppressing the related properties as shown below

Sample snippet for reference (You can add in project specific clientlibs folder or clientlibs with category - cq.authoring.dialog as this is needed only in author)

Below is per AEM 6.5.0

 

$(document).on("dialog-ready", function() { var rescType = $(".coral3-Dialog-content input[name='./sling:resourceType']").val(); console.log("Resource Type="+rescType) if(rescType.includes("learnings/components/content")){ // applies to all component dialogs under this path - learnings/components/content $(".cq-Dialog:not([fullscreen]) .cq-RichText-editable").css("height", "unset"); $(".cq-RichText-editable").css({"min-height":"unset", "padding":"unset"}); $(".cq-Dialog[fullscreen] .cq-RichText .rte-sourceEditor").css("height", "unset"); // for full screen } });

 

Screenshot 1:

Outcome in richtext field:

    SiriusRex
    SiriusRexAuthor
    Level 2
    September 16, 2020
    Unfortunately, I don't think we have dialog markdown that I can modify. I've only ever built the dialog using nodes/XML. I'm assuming that maybe I can add a custom data variable that can be used for targeting by CSS.
    Shashi_Mulugu
    Community Advisor
    Shashi_MuluguCommunity Advisor
    Community Advisor
    September 16, 2020

    @siriusrex I understand your problem statement and converting to rich text is the only way I see, but I didn't understand your concern of having RTE editor as big box in authoring dialog?

     

    Can you please explain more about that? As RTE is a free form text editor with OOTB unlimited content capabilities it is big in size?

     

    Do you want to make it appear small or restrict content entry to limited lines?

     

    To limit box size , no OOTB way but try playing with coral.rte css and override with our custom css by creating a custom clientlib

     

    For Charatcer limit restrictions we can implement validators which is again custom implementation.

      SiriusRex
      SiriusRexAuthor
      Level 2
      September 16, 2020
      I'd like to use the RTE for a title component, which generally implies a limited number of characters. Titles rarely exceed more than a few words, and having the full RTE box might suggest to our authors that they can insert longer than normal titles. I don't think we're at the point of limiting characters through validation. We just want a visual reinforcement of the idea that titles should be kept short.
      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      September 16, 2020

      You can add granite:class property to text field node, which will be adding class to DOM and control height using css. Just make sure if you are using RTE you should be removing default p tag otherwise semantics could be the problem.

      Arun Patidar
        SiriusRex
        SiriusRexAuthorAccepted solution
        Level 2
        September 17, 2020

        Ultimately, all I needed to do was create a data-attribute on the richtext node that I could target with authoring-specific CSS. The answers below all point to that, but I think maybe went in a direction that was too complex for what I was trying to do.

        Terms & ConditionsAccessibility statement

        Loading footer...