Add classes to Textarea field output

Kirby 3 Solved ✅
1

Hello,

I´m wondering if there is a way to add CSS classes to the generated elements. That would be an important feature, right? I didn´t find anything on the docs about this topic.

Thank you!

2

I think your best bet might be to use kirbytext’s “after” hook to perform a php preg_replace on your text just before output. See: https://getkirby.com/docs/reference/plugins/hooks/kirbytext-after

3

You could also write your own custom markdown component, there was a plugin for Kirby 2 that could serve as an example: https://github.com/fabianmichael/kirby-classymarkdown

If you only need classes for Kirbytags (images, links, etc), not for all markdown output, you can either add these classes manually for each tags, or override the existing Kirbytags and apply custom classes.

4

Great ideas! I think I´ll go for the “preg_replace” solution for now. Thank you both.

5

Here is my short snippet to add classes to the editor output using the “kirbytext:after” hook:

  // Hooks
'hooks' => [
    'kirbytext:after' => function ($text) {

        // Config RTE classes

        $from = array();
        $from[0] = '/<h1>/';
        $from[1] = '/<h2>/';
        $from[2] = '/<h3>/';
        $from[3] = '/<strong>/';
        $from[4] = '/<em>/';
        $from[5] = '/<p>/';
        $from[6] = '/<code>/';
        $from[7] = '/<ul>/';
        $from[8] = '/<ol>/';
        $from[9] = '/<li>/';

        $to = array();
        $to[0] = '<h1 class="c-rte__h1">';
        $to[1] = '<h2 class="c-rte__h2">';
        $to[2] = '<h3 class="c-rte__h3">';
        $to[3] = '<strong class="c-rte__strong">';
        $to[4] = '<em class="c-rte__em">';
        $to[5] = '<p class="c-rte__p">';
        $to[6] = '<code class="c-rte__code">';
        $to[7] = '<ul class="c-rte__ul">';
        $to[8] = '<ol class="c-rte__ol">';
        $to[9] = '<li class="c-rte__li">';

        $result = preg_replace($from, $to, $text);

        return $result;
    }
],

Maybe someone else has a use for it.

6 Likes
6

Was looking for this fix, thanks a lot for sharing it.

7

Youre welcome.