Is there a way to add custom button to TinyMCE toolbar with only text on it (without image)? Tried removing the setting image path section, now it has a blank button. This is my existing code:

<script language="javascript" type="text/javascript">
        tinyMCE.init({
            mode: "textareas",
            theme: "advanced",
            theme_advanced_buttons1: "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
            theme_advanced_buttons2: "mybutton",
            theme_advanced_buttons3: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            setup: function (ed) {
                // Add a custom button
                ed.addButton('mybutton', {
                    title: 'My button',
                    onclick: function () {

                        ed.focus();
                        ed.selection.setContent('SampleText');
                    }
                });
            }
        });
</script>

How to set text on the button without an image?

Is there a way to add custom button to TinyMCE toolbar with only text on it (without image)? Tried removing the setting image path section, now it has a blank button. This is my existing code:

<script language="javascript" type="text/javascript">
        tinyMCE.init({
            mode: "textareas",
            theme: "advanced",
            theme_advanced_buttons1: "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
            theme_advanced_buttons2: "mybutton",
            theme_advanced_buttons3: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            setup: function (ed) {
                // Add a custom button
                ed.addButton('mybutton', {
                    title: 'My button',
                    onclick: function () {

                        ed.focus();
                        ed.selection.setContent('SampleText');
                    }
                });
            }
        });
</script>

How to set text on the button without an image?

• javascript
• tinymce

3 Answers 3

Just put inside you toolbar "mybutton" and then add this inside tinymce.init:

setup: function(editor) {
editor.addButton('mybutton', {
                type: 'menubutton',
                text: 'My button',
                icon: false,
                menu: [
                    {text: 'Menu item 1', onclick: function() {editor.insertContent('Menu item 1');}},
                    {text: 'Menu item 2', onclick: function() {editor.insertContent('Menu item 2');}}
                ]
            });
        }   

Try setting the label property.

ed.addButton('mybutton', {
    title: 'My button',
    onclick: function () {
        ed.focus();
        ed.selection.setContent('SampleText');
        ed.label = 'My Button';
    }
});

I had to move the label attribute out of the onclick function to get it to work for me.

ed.addButton('mybutton', {
    title: 'My button',
    label: 'My Button',
    onclick: function () {
        ed.selection.setContent('SampleText');
    }
});