Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TinyMCE custom button with text on it

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?

like image 270
Nalaka526 Avatar asked Dec 21 '22 09:12

Nalaka526


2 Answers

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');}}
                ]
            });
        }   
like image 195
user2708716 Avatar answered Dec 28 '22 07:12

user2708716


Try setting the label property.

ed.addButton('mybutton', {
    title: 'My button',
    onclick: function () {
        ed.focus();
        ed.selection.setContent('SampleText');
        ed.label = 'My Button';
    }
});
like image 33
Alex Avatar answered Dec 28 '22 06:12

Alex