CODEWITHSUNDEEP
javascripttinymcetinymce-4tinymce-4.2
pazof
pazof

Reputation: 964

TinyMCE 4 change toolbar button text on editor click

Using tinyMCE 4.2, I need to change the text of a (custom) toolbar button every time the user clicks anywhere inside the editor.

This is the relevant code:

tinymce.init({

    //code ommitted...

    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages navigationbutton glossary",

    setup: function(editor){

        //add "Glossary" button
        editor.addButton('glossary', {
            name: 'glossary',
            text: 'Glossary',
            onclick: function(){
                /*
                //commented on purpose
                var button = this;
                var updatedButtonText = "Some updated button text";
                button.text = updatedButtonText;
                */
            }
        });//end addButton

        editor.on('click', function(){
            var updatedButtonText = "Some updated button text";

            //update the button text:
            editor.buttons.glossary.text = updatedButtonText; //doesn't work
            window.parent.tinyMCE.activeEditor.buttons.glossary.text = updatedButtonText; //doesn't work either

            //confirm changes:
            console.log(editor.buttons.glossary.text); //correctly prints "Some updated button text"
            console.log(window.parent.tinyMCE.activeEditor.buttons.glossary.text); //correctly prints "Some updated button text" as well
        });

    }//end setup
});//end tinymce.init

So the problem really is that, while the button object's text property does change, this change is not reflected in the editor, where the button text remains "Glossary". Interestingly enough, if I do the exact same thing through the button's onclick function (so if I uncomment the commented code block), then it works perfectly as expected - the button text is updated in the editor.

I spent hours in TinyMCE 4's documentation trying to find some relevant information, but apparently in vain. Any ideas?

Upvotes: 1

Views: 2617

Answers (2)

Vigilant Orchard
Vigilant Orchard

Reputation: 11

I know this is an older post, but this may help someone. I use jQuery to access the nodes.

First target the button group, which are separated by the pipe | delimiter.

In my case, it's the last of my three button groups.

$('.tox-toolbar__group').last()

Then, since I only have one button in the group, I find the last span tag and change the text node with .html()

$('.tox-toolbar__group').last().find('span').last().html('Button Text Changed')

Upvotes: 1

Michael Fromin
Michael Fromin

Reputation: 13746

Once the editor's toolbar is loaded TinyMCE does not support changing the icons/text of the buttons. You can change if a button is toggled "on" or "off" (e.g. what the Bold button does when you place the cursor on text that is or is not bolded) but you cannot change the actual text/icon.

The JavaScript object that you used to define the glossary button is still in memory after the editor fully loads so you can do things to that object like change a property value or console.log that value but TinyMCE is not going to go back and look at that button object and update the button after the toolbar is loaded.

Upvotes: 2

Related Questions