One of the things I've struggled the most with when it comes to TYPO3 is configuring the HtmlArea rich text editor (RTE). For most of the time that I've used TYPO3, I've just stuck with the default configurations of the editor.

But I have times when I'd like to be able to use different HTML tags in the editor. Adding those tags to the editor without proper editor configuration results in those tags just being removed.

After digging in to the documentation, I learned how to configure the HTMLArea RTE a little bit to allow some of the tags I like to use.

What follows is an example of how I configured TYPO3's RTE to allow me to use the <kbd> tag. The example also adds a button above the editor so that you can wrap highlighted text with the <kbd> tag.

 

Getting Started

First of all, before I got started, there was no button for the <kbd> tag above the editor near the buttons for bold, italics, big, small, and others. 

I could click the "Toggle text mode" button to edit the source and then add <kbd> tags, but once I clicked the "Save" button, the <kbd> tags would be removed.

My configuration that allowed me to add <kbd> tags in the htmlArea RTE

To add the ability to use <kbd> tags in the RTE, and to show a button I could just click on to add them, I had to edit the page properties of my root page. This could also have been done on any page in the rootline above the page that I want to have <kbd> tags on. 

I chose to add the configuration to the root page because that would allow all pages below it to inherit the configuration.

So step 1 for me was to enter the page properties of my root page.

Next, from the page properties page of my root page, I had to click on the "Resources" tab where I would find the Typoscript Configuration section for the page and under it, a text box where I could enter the Page TSConfig configuration for the page which will cascade down to all pages below it.

Step 2 is to click on the "Resources" tab of the page properties for the root page and locate the box where Page TSConfig can be entered.

Finally, all I needed to do was add the actual configuration that would tell the htmlArea RTE to allow the use of the <kbd> tag in the editor and to add a button that I could click on to wrap selected text with the <kbd> tag.

So for Step 3, in the "Page TSConfig" box, I entered the following configuration.

RTE.default {

showButtons := addToList(keyboard)

proc.allowTags := addToList(kbd)

proc.entryHTMLparser_db.allowTags < RTE.default.proc.allowTags

}

After entering that information, clicking the "Save" button saved the configuration and I could then see that a button to add a <kbd> tag appeared above the editor.

Now whenever I want to use the <kbd> tag, I just highlight my text and click the "kbd" button. 

Share

Comments (0)

No comments found!

Write new comment