4.5/5
(4 Feedback)

Implement custom HTML structure for a link added via RTE

Case:

We want to display the Font-awesome icon as a decoration for a link added as content via RTE.

Solution:

We will render the HTML structure for the font-awesome icon <i class="fal fa-envelope" aria-hidden="true"></i> as a link structure.

The first step is to create a class that we will use when styling the link; we will use the class "btn btn-fa-email" - this class will serve as an identifier for the RTE to render the fa-icon structure.

The second step is to update the typoscript code for the A tag, specifically lib.parseFunc.tags.a, to support the HTML structure for the envelope icon.

lib.parseFunc.tags.a {
    newWrap.cObject = CASE
    newWrap.cObject {
        key.data = parameters:class
        default = TEXT
        default.value = |
        default.value.override.cObject = COA
        default.value.override.cObject {
            10 = TEXT
            10.value =  |
            10.if {
                value.data = parameters:class
                equals = btn btn-fa-email
            }
        }
    }
}
lib.parseFunc_RTE.tags.a.innerWrap < lib.parseFunc.tags.a.newWrap

As a final result in the frontend, lib.parseFunc_RTE function will render link structure like: 

<a href="mailto:info@birdcode.tech" class="btn btn-fa-email"><i class="fal fa-envelope" aria-hidden="true"></i> info@birdcode.tech</a>
View result in the Frontend:

Rate now:

Other Tips