add class to link in RTE

It’s might be a simple problem, but yet it’s really hard to find the correct solution. Although the solution is a simple one.

Using any of the CSS frameworks out there, you can easily create a button, even from a link, just by adding a class. The problem is, how you can put this class in RTE, so that the editor can easily choose which button class should be used.

some TypoScript snippets, which add 2 classes fb-button and tw-button to the style dropdown in RTE link wizard:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// added new class to button
RTE {
	default {
		proc.allowedClasses := addToList(fb-button,tw-button)
		buttons.link.properties.class.allowedClasses := addToList(fb-button,tw-button)
	}
	classes {
		fb-button {
			name = red button
		}
		tw-button {
			name = grey button
		}
	}
}

result:

rte-link-wizard

PS: to make it beautiful, you can define a CSS file.

1
2
3
RTE.default {
	contentCSS = path/to/stylesheet/rte.css
}

Leave a Reply

Your email address will not be published. Required fields are marked *