How to create a custom button in the toolbar when making a post?

Skyswipe

Hi,

I just want to learn how to make a custom button in the toolbar. I read the documentation for extensions and I just can't find the info anywhere. https://docs.flarum.org/extend/#core-vs-extensions

I can't seem to find any current threads on it either. The default buttons when making a post look like this:

I just want to add my own button that does something. For example, like bbcode, if you would write code between [card] and [/card], it would convert it to an image. Or, a button that allows an upload of a txt file, etc.

clarkwinkelmann

Skyswipe buttons can be added by extending TextEditor.toolbarItems.

If you want to add a simple button that adds some predefined content in the editor you can see how the emoji extension does it:

https://github.com/flarum/emoji/blob/8d4e2ca6a4ff36a0acd5ccdf7a2df1db836d6023/js/src/forum/addComposerAutocomplete.js#L169


import { extend } from 'flarum/extend';
import TextEditor from 'flarum/components/TextEditor';
import TextEditorButton from 'flarum/components/TextEditorButton';

// [...]

  extend(TextEditor.prototype, 'toolbarItems', function(items) {
    items.add('emoji', (
      <TextEditorButton onclick={() => this.insertAtCursor(':')} icon="far fa-smile">
        {app.translator.trans('flarum-emoji.forum.composer.emoji_tooltip')}
      </TextEditorButton>
    ));
  });

// [...]

If you want to see a more complex example here's what the Upload extension does https://github.com/FriendsOfFlarum/upload/blob/master/js/src/forum/addUploadButton.js

Skyswipe

Thank you. This should help. Upon clicking the button, the user inputs something and then a code I write would convert that user input into something else using a backend api. That's all i want to do. I actually have this code already built through external html/css/js. I just have to add this button in the forum.

010101

I was able to use this example and get a new icon added to my toolbar. But, the onclick event isn't working. It's undefined. Obviously I'm not properly pointing to the right JavaScript. Anyone have more tips/advice?

Edit: I found a way. 🙂