Customizing Text Styles in Universal Editor for Edge Delivery Service: Adding Alignment Options

Hello @venkateshpai 

Based on the current Universal Editor + Edge Delivery Services capabilities, the RTE supports enabling or disabling only the formatting options that Edge Delivery already allows - such as headings, bold, italic, lists, and links.

Adding custom styles or introducing new alignment buttons is not supported.

Edge Delivery enforces strict semantic HTML, and custom styling via the RTE is intentionally not allowed.

Reference:
Supported HTML for EDS: https://www.aem.live/developer/markup-reference

There is also a new, more configurable RTE for Universal Editor in the coming weeks :
https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developing/universal-editor/configure-rte

Hi ​@VenkateshPai 

You can't extend the Text Default RTE in Universal Editor for an Edge Delivery Services site to add new inline options like alignment. In EDS projects the Universal Editor RTE is intentionally limited to the HTML that Edge Delivery supports and anything beyond that is stripped or ignored.

That's why:

• The RTE alignment config you see in the docs (alignment: ["left","center","right","justify"]) is only honored when the backend supports those features.
• For EDS / Crosswalk specifically, text alignment in the RTE is not supported, and trying to enable it via JSON config is "not supported" even if the buttons appear.

For EDS, the recommended approach is to control alignment via block/section classes, not via RTE buttons:

• Expose alignment as a block option in your model (e.g. component-definition.json):

  {
    "models": [
      {
        "id": "text-default",
        "fields": [
          {
            "component": "richtext",
            "name": "text",
            "label": "Text",
            "valueType": "string"
          },
          {
            "component": "select",
            "name": "classes",
            "label": "Alignment",
            "options": [
              { "label": "Left", "value": "text-left" },
              { "label": "Center", "value": "text-center" },
              { "label": "Right", "value": "text-right" }
            ]
          }
        ]
      }
    ]
  }
  

• Style those classes in CSS so they control text alignment for the whole text block:

  .text-left  { text-align: left; }
  .text-center{ text-align: center; }
  .text-right { text-align: right; }
  

• In Universal Editor, authors pick Left / Center / Right from the block options; the RTE remains purely semantic (paragraphs, lists, emphasis), and Edge Delivery renders the alignment via CSS classes on the block.
• Block options are the supported way to handle layout/styling variations in EDS: https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/edge-delivery-services/developing/universal-editor/how-to/block-options