Question

使用tinyMCE 4.2，每次用户点击编辑器内的任何位置时，我都需要更改（自定义）工具栏按钮的文本。

这是相关代码：

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

所以问题实际上是，虽然按钮对象的text属性确实发生了变化，但这种变化并没有反映在编辑器中，其中按钮文本仍然是＆＃34;词汇表＆＃34;。有趣的是，如果我通过按钮的onclick函数执行完全相同的操作（因此，如果我取消注释注释的代码块），那么它将按预期完美地工作 - 按钮文本在编辑器中更新。

我花了几个小时在TinyMCE 4的文档中试图找到一些相关的信息，但显然是徒劳的。有什么想法吗？

Answer 1

加载编辑器的工具栏后，TinyMCE不支持更改按钮的图标/文本。如果按钮“打开”或“关闭”，您可以更改（例如，当您将光标放在未加粗的文本上时，粗体按钮会执行什么操作），但您无法更改实际的文本/图标。

用于定义词汇表按钮的JavaScript对象在编辑器完全加载后仍然在内存中，因此您可以对该对象执行操作，例如更改属性值或console.log该值，但TinyMCE不会返回然后查看该按钮对象并在加载工具栏后更新按钮。

Answer 2

我知道这是一个较旧的帖子，但这可能对某人有所帮助。我使用 jQuery 访问节点。

先定位按钮组，用竖线隔开|分隔符。

就我而言，它是我的三个按钮组中的最后一个。

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

然后，由于我在组中只有一个按钮，所以我找到最后一个 span 标签并使用 .html() 更改文本节点

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

TinyMCE 4在编辑器上单击更改工具栏按钮文本

2 个答案: