Medium-editor: How to add a button to change the font

[THPubs]

Hi, can someone please show me how to use the fontName extension to add a button which will change the font? I was unable to figure out how to use that extension.

[THPubs]

Anyone?

[geekiam]

Hi @THPubs :v:

It seems that fontname is a bult-in extension, so you can just override default toolbar options like this:

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: [
      'fontname'
    ]
  }
});

Here is more complex example on JSFiddle: https://jsfiddle.net/ypcgaomL/2/

[THPubs]

Cool is it possible to define the exact fonts we need?

[geekiam]

Yep, you can do this.

var fontsList = ['', 'Arail', 'Open Sans', 'sans-serif', 'Your Font Name'];

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: [{
      name: 'fontname',
      action: 'fontName',
      aria: 'change font name',
      contentDefault: '±', // ±
      contentFA: '<i class="fa fa-font"></i>',

      fonts: fontsList
    }]
  }
});

[THPubs]

Perfect thanks!

[nmielnik]

Thanks @geekiam !

[geekiam]

@nmielnik you're welcome :wink:

[hayk94]

Guys adding custom fonts seems to not work for me please help.

https://jsfiddle.net/ypcgaomL/3/