Extend the default toolbar (without overriding default icons)

[ferreiro]

From the documentation, we can provide our own array of toolbar icons, however doing so we override the default icons.

I'd like to extend the default toolbar with some extra icons I provided in this way:

{
	name: "custom",
        action: function customFunction(editor){},
	className: "fa fa-star",
	title: "Custom Button",
}

Is it possible to do this with the current codebase? Reading the code I didn't see a way to do so. Thank you.

[CWharton]

const toolbar = [
      'bold', 'italic', 'heading', '|',
      'code', 'quote', 'unordered-list', 'ordered-list', '|',
      'link',
      {
        name: 'image',
        action: function customFunction(editor) {
          alert('This feature is not implemented yet.');
        },
        className: 'fa fa-picture-o',
        title: 'Insert Image',
      },
      'table', '|',
      'preview', 'side-by-side', 'fullscreen', '|',
      {
        name: 'Help',
        action: function customFunction(editor) {
          alert('This feature is not implemented yet.');
        },
        className: 'fa fa-keyboard-o',
        title: 'Editor Sortcuts',
      },
      {
        name: 'Help',
        action: function customFunction(editor) {
          alert('This feature is not implemented yet.');
        },
        className: 'fa fa-question-circle',
        title: 'Editor Help',
      },
      '|', // Separator
    ];

instance = new SimpleMDE({
        element: this.textarea.nativeElement,
        toolbar: this.toolBarSetting(),
      });

This is the easiest way to do this.

[git-hub-user]

I used the example of @CWharton, but needed to modify the last statement to toolbar: toolbar, to make it work.

[pcornier]

I found a tricky solution

mde.gui.toolbar.remove()
mde.toolbar.push({
  name: 'metadata',
  action: function() {},
  className: 'fa fa-tags',
  title: 'Metadata'
})
mde.createToolbar()

[cr0wg4n]

Trick

        var simplemde = new SimpleMDE();
	simplemde.toolbar.push(
		{
			name: "upload",
			action: function customFunction(){
				console.log("hola")
			},
			className: "fa fa-upload",
			title: "upload Files",
			id: "upload-button"
		}
	);
	var tools = simplemde.toolbar;
	simplemde.toTextArea();
	simplemde = null;
	var mde = new SimpleMDE({
		element: document.getElementById("editor1"),
		spellChecker: false,
		autosave: {
			enabled: true,
			unique_id: "editor",
		},
		toolbar: tools,
	});

Works for me!