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

标签 javascript tinymce tinymce-4 tinymce-4.2

使用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 属性确实发生了变化,但这种变化不会反射(reflect)在编辑器中,其中按钮文本仍然是“Glossary”。 有趣的是,如果我通过按钮的 onclick 函数执行完全相同的操作(因此,如果我取消注释注释的代码块),那么它会按预期完美工作 - 按钮文本会在编辑器中更新。

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

最佳答案

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

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

关于javascript - TinyMCE 4 在编辑器单击时更改工具栏按钮文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39496582/

相关文章:

javascript - 如何 npm install only devDependencies with node 8.7.x?

javascript - 如何将 2 个不同 .htm 文件中的两个表单提交到同一位置

jquery - tinyMCE 3 和 4 在同一页上

javascript - 使用 ng-model 数组

javascript - ionic 2 : when I pass array to component I get a string on component. ts

php - 如何使用php从上传文件夹添加和删除tinymce中的图像

c# - tinyMCE自动添加p标签和nbsp

javascript - 在模态对话框中使用 TinyMCE

javascript - TinyMCE 从剪贴板复制并粘贴源代码

javascript - Tinymce 无法使用 XAMPP 在本地主机上正确运行?