Adding rich text formatting to a title component

SiriusRex

16-09-2020

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. 

Accepted Solutions (1)

Accepted Solutions (1)

SiriusRex

17-09-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.

Answers (3)

Answers (3)

Arun_Patidar

MVP

16-09-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.

Shashi_Mulugu

MVP

16-09-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.

Vijayalakshmi_S

MVP

16-09-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:

Vijayalakshmi_S_0-1600280826222.png

Outcome in richtext field:

Vijayalakshmi_S_1-1600280877235.png