Add specific button in editor toolbar Grav CMS

Question

How can I add a new button in the editor toolbar in Grav CMS?. For example, the toolbar now contains a bold button, italic button, list button...etc. What I want is to add a new button to this toolbar to do a specific task like "Adding to some text". Or something similar. Is that could be done?

Answer 1

you can add button to editor through js

(function($){
    $(function(){
        $('body').on('grav-editor-ready', function() {
            var Instance = Grav.default.Forms.Fields.EditorField.Instance;
            Instance.addButton({
            // Your stuff
            });
        });
    });
})(jQuery);

Plenty examples how to do it on github, for instance you can check how Grav Team Implement New editor button here : https://github.com/getgrav/grav-plugin-editor-buttons

they use that method to add shortcodes buttons to editor