Simplemde-markdown-editor: [Feature Request] Please provide a way to add custom buttons to the toolbar and a way modify behaviour of existing ones

[aruizca]

In my use case I need to add a button to upload files and another one to browse them.

[derpoho]

You already can add custom buttons by changing the toolbar config option, you can also set custom functions!

[dindinet]

@clubdesign I'm new to this editor. Can you give me a few pointers for adding a custom button and setting a custom function. I want to replace the image button with a button which will allow me to use the google file picker to choose the image url. This will return the url for adding to the simplemde editor.( I already wrote the code to get the image url from the picker)

[WesCossick]

You'll need to use the toolbar option:

// Customize all information and/or add your own icons
var simplemde = new SimpleMDE({
    toolbar: [{
            name: "bold",
            action: SimpleMDE.toggleBold,
            className: "fa fa-bold",
            title: "Bold (Ctrl+B)",
        },
        "|", // Separator
        ...
    ],
});

Just change the action to a function of your own.

[dindinet]

Thanks Wes

I already went that route.

I ended up setting the values in the options.insertTexts.image array with
the image url returned from the google picker and then called drawImage

A bit dirty but it got the job done fast.

¸ ... ___________
·´º o·, /__/ _/\_ ____/\ ```)¨(´´´ | | | | | | | || |l±±±±| °´ ¸,.-·~·~·-.,¸°·-. :º° ·~·~·-..,¸
Property South Costa Blanca
http://www.MaxGoldHouse.com

On 25 November 2015 at 19:58, Wes Cossick - [email protected] <
github.dklongley.b3f47768d1.notifications#[email protected]> wrote:

You'll need to use the toolbar option:

// Customize all information and/or add your own iconsvar simplemde = new SimpleMDE({
toolbar: [{
name: "bold",
action: SimpleMDE.toggleBold,
className: "fa fa-bold",
title: "Bold (Ctrl+B)",
},
"|", // Separator
...
],
});

Just change the action to a function of your own.

—
Reply to this email directly or view it on GitHub
https://github.com/NextStepWebs/simplemde-markdown-editor/issues/183#issuecomment-159716155
.

[aruizca]

@dindinet @WesCossick So that means you have to customize the whole toolbar, you cannot modify the existing one, right?
I'd say this use case is not very clear in the documentation, but I'd say is a pretty common scenario.
Thanks for the heads up!

[dindinet]

Actually I just added one new button. which triggered my code t fetch the
url from google then pushed the result into the options.insertTexts.image
array and called the drawImage.
I suspect this would be messy with more than one editor on the page.

somehting like

function drawCustom(editor, customStuff) {
var cm = editor.codemirror;
var stat = getState(cm);
_replaceSelection(cm, stat.image, customStuff);

would be handy

¸ ... ___________
·´º o·, /__/ _/\_ ____/\ ```)¨(´´´ | | | | | | | || |l±±±±| °´ ¸,.-·~·~·-.,¸°·-. :º° ·~·~·-..,¸
Property South Costa Blanca
http://www.MaxGoldHouse.com

On 25 November 2015 at 22:51, Angel Ruiz - [email protected] <
github.dklongley.b3f47768d1.notifications#[email protected]> wrote:

@dindinet https://github.com/dindinet @WesCossick
https://github.com/WesCossick So that means you have to customize the
whole toolbar, you cannot modify the existing one, right?
I'd say this use case is not very clear in the documentation, but I'd say
is a pretty common scenario.
Thanks for the heads up!

—
Reply to this email directly or view it on GitHub
https://github.com/NextStepWebs/simplemde-markdown-editor/issues/183#issuecomment-159749381
.

[aruizca]

@dindinet
So you did something like:

toolbar.push({
  myButtonsSettings: ...
});

How would you add a button next to one of the existing ones?

[aruizca]

Nevermind I think I got it now...

[dae721]

@aruizca, @dindinet I'm not seeing any way to add an additional custom toolbar button without re-specifying the entire set of default buttons in the toolbar option (implied by the 3 dots in the snippet from @WesCossick above). But it sounds like you were able to do that. If so, what am I missing?

[smnbbrv]

@dae721 I can't either find it. I think they are adapting the original library code. At least _replaceSelection(cm, stat.image, customStuff); function is private and is not available outside the library.

@WesCossick this is sad that you don't pass your helper functions like _replaceSelection to the action function. That means we should implement just the same function or to make a library fork, shouldn't we?

[dae721]

@smnbbrv I finally noticed something a couple days ago that helps: the array passed in for the toolbar option can be a mix of strings and icon objects. If it's a string, SimpleMDE looks it up and replaces it with the corresponding icon object. I originally thought the entire array had to be icon objects so I was redefining each one using code from SimpleMDE's builtInButtons. Instead, you can do something like this (I'm using typescript, where SimpleMDEEx is a subclass of SimpleMDE):

myButtons: Array<string|SimpleMDE.ToolbarIcon> = [
  "bold", "italic", "strikethrough", "heading", "|", "code", "quote", "unordered-list", "ordered-list",
  {
    name: "outdent",
    action: (mde: SimpleMDEEx) => mde.outdent(),
    className: "fa fa-outdent",
    title: "Decrease Indent (Shift-tab)"
  },
  {
    name: "indent",
    action: (mde: SimpleMDEEx) => mde.indent(),
    className: "fa fa-indent",
    title: "Increase Indent (tab)"
  },
... the rest ...
];

[smnbbrv]

@dae721 nice catch! Did you find a way to use internal functions like _replaceSelection?

[dae721]

@smnbbrv No, and I agree that would be nice. Instead I've put that type of functionality in my subclass (SimpleMDEEx above). I haven't needed _replaceSelection yet, but I've defined similar functions such as appendToCurrent and insertAfterLine (as well as indent and outdent shown above). These use codemirror directly and don't have any dependencies on SimpleMDE internals. Probably the same could be done for _replaceSelection, but it would be duplicating code of course.

[theamitkrsingh]

myButtons: Array<string|SimpleMDE.ToolbarIcon> = [
  "bold", "italic", "strikethrough", "heading", "|", "code", "quote", "unordered-list", "ordered-list",
  {
    name: "outdent",
    action: (mde: SimpleMDEEx) => mde.outdent(),
    className: "fa fa-outdent",
    title: "Decrease Indent (Shift-tab)"
  },
  {
    name: "indent",
    action: (mde: SimpleMDEEx) => mde.indent(),
    className: "fa fa-indent",
    title: "Increase Indent (tab)"
  },
... the rest ...
];

[nondanee]

@ialex90
You can do like this

    action: function customFunction(editor){
        editor.codemirror.replaceSelection("your words")
    }

[msangel]

This feature is alreay implemented in sparksuite/simplemde-markdown-editor/pull/613, Please accept it.