Change font-size of the content

Hi. I’ve tried a lot of wysiwyg editing plugins, but didn’t find any with font-size button. Is there any built-in method to do this? If not, how can I implement it by myself?

You could create your own Kirby tag.

Thanks. I’m reading that topic at the moment. But I still couldn’t find any info about creating custom markdown buttons (for textarea field, for example). Can you help with any link?

There is no documentation. for that creating custom buttons, have a look at the source code of the textarea field. You can use the original field as a basis and expand upon that.

I see. Thanks a lot.

Maybe you can also check out @thguenther’s excellent simpleMDE plugin?

I think you might be able to do it with Kirby PEP., which allows you to modify the html that markdown gets translated into. For instance, S1SYPHOS made a plugin that uses Kirby PEP to highlight code fences depending on what code language is in the fence block, by adding the appropriate classes.

@S1SYPHOS Could PEP be used to alter font sizes on selected text, via adding classes?

You could probably then tie that into a custom button in SimpleMDE.

@jimbobrjames That plugin doesn’t cover paragraph or subparagraph elements, also, it would be far too much overhead for adding font sizes. Also, the button has to add html elements around the parts of the text you want to modify on a subparagraph level. The hard part here is not adding the class (you would need inline styles instead of classes anyway if you really want to leave it completely to the user; maybe not a good idea, but we don’t know the use case) but creating the button and adding the html tag.

Yes, I thought it seemed like using a cannon to kill a mosquito!

You can wrap tags round stuff with a custom Kirby tag. I do this to make fancy style information boxes like so:

<?php
kirbytext::$tags['boxorange'] = array(
  'attr' => array(
    'id'
  ),
  'html' => function($tag) {
    switch ($tag->attr('boxorange')) {
      case 'open':
        $markup  = '<section class="box boxorange"' . 'id="' . $tag->attr('id'). '"' . '>';
        $markup .= '<div class="box-content" markdown="1">';
        break;
      case 'close':
        $markup  = '</div></section>';
        break;
    }
    return $markup;
  }
);

Then after enabling markdown extra in the config, you can wrap a bunch of stuff like this:

(boxorange: open)

## Any title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis lorem maximus, faucibus eros ut, malesuada risus. Duis ornare venenatis eleifend. Phasellus eu ipsum quis urna maximus volutpat. Aenean bibendum sapien et enim fringilla porttitor. Morbi vitae pharetra turpis, finibus ultricies massa.

* perhaps a list
* more list
* a third list

(boxorange: close)

That’s great if you want to effect the style of a whole paragraph or a bunch of stuff by wrapping it some html, but as @texnixe says the real problem is getting it done on command is the real trick here and i think being able to do it on specific words in side a paragraph will be hard. I guess the tag solution above might do it if you wrapped words with the tag in a paragraph. You still need to figure out how to get the toolbar button to wrap the selected text with the tag though.

@jimbobrjames I think using a Kirbytext filter like the columns plugin does it, would be the cleaner way here. Plus, you don’t have to enable markdown extra.

A Kirbytag was already suggested by @bvdputte, but @Ariakas wanted a button.

Sure, I’m looking into it but it’s beyond my Javscript powers. Looking inside editor.js at line 128 within the SimpleMDE plugin, it looks like it’s doable. The link button for example replaces the selected text with a Kirby link tag containing your selected text. You would need something similar that appends and prepends a tag like a posted above to the selected text, or add stuff that works similar to the columns plugin suggested by Texnixe.

I might investigate further at the weekend as I would find this useful myself, but cant promise anything.

Edit: I have just seen this on Stack overflow thats quite useful. Ill see if i can extend the tool bar at weekend.

And I am still wondering what the use case is for mixing differently sized paragraph text within text blocks - apart from some very special use cases. After all, there is probably a reason why nobody deemed it necessary to add such a button.

Welk, since you called my name: what she said :dancer:

Well, I don’t understand the use case either, it doesn’t make good design sense. Im just trying to help the poster out. :slight_smile:

And I (well, we) appreciate your effort, being one of the many good souls around this forum. I cherish both the Kirby software AND the Community built around it.

Thanks!

I’ll just post the result for anyone who wants to do the same.
I decided to use YAKME wysiwyg plugin (although it is no longer supported). It is based on simpleMDE and uses CodeMirror plugin. In the YAKME’s base .js file I’ve added custom button to the simpleMDE toolbar declaration like that:

{
  name: "kirby_size", //button name
  action: function yakme_txt() {
      var cm = $(".CodeMirror")[index].CodeMirror, //text container
          selection = cm.getSelection().trim(), //selected text
          text = "";
      if (selection.indexOf("(text_size: ") === 0) { //check if it is text_size already
          text = selection.split("text: ")[1].split(")")[0];  //get only text. This part must be improved
      }
      else {
          text = "(text_size: 1 text: " + selection + ")"; //wrap text with custom kirbytag
      }
      cm.replaceSelection(text); //finally replace old selected text with the wrapped
  },
  className: "fa fa-text-height",
  title: "Font Size",
},

Then I just created custom kirbytag “text_size”:

kirbytext::$tags["text_size"] = array(
"attr" => array(
    "text"
),
'html' => function($tag) {
    $font_size = $tag->attr("text_size");
    $text = $tag->attr("text");

    return "<span style='font-size: {$font_size}rem'>$text</span>";
}

);

Hope it’ll be helpful to someone.

1 Like