Search code examples
javascriptjquerytinymcetinymce-5

How to change value in attribute title for button on the toolbar tinymce?


I need for the element "Supersctipt" set attribute title value as "footnote".
By default here "Superscript".
I don't know a way how to do it. Here is my code tinymce:

initTinyMCE()
function initTinyMCE(selector = '.js-tinymce') {
    tinymce.init({
        selector: selector,
        skin: false,
        branding: false,
        menubar: false,
        height: 500,
        toolbar:
            'undo redo | formatselect | bold italic underline superscript | bullist numlist | removeformat code',
        plugins: [
            "code", "paste", "lists"
        ],
        paste_as_text: true,
        block_formats: 'Paragraph=p; Header 3=h3; Header 4=h4; Header 5=h5; Header Underline=h6; ',
        content_css: '/css/tinymce.css?' + new Date().getTime(),
    })
}

I tried through jQuery refer to this element, but without success, because tinymce inits a little later:

$(function() {
   $('.js-tinymce button[title="Superscript"]').attr('aria-label', 'footnote')
})

I also tried this way, reading documentation:

formats: {
            sup: { selector: 'sup'},
          },
style_formats: [
            { title: 'footnote', format: 'sup' },
          ]

But without success too( Finally, how to do this easy task?


Solution

  • Yeeeah! I've solved the problem by adding setup:... option to the end of tinymce init object. Code:

    initTinyMCE()
    function initTinyMCE(selector = '.js-tinymce') {
        tinymce.init({
            selector: selector,
            skin: false,
            branding: false,
            menubar: false,
            height: 500,
            toolbar:
                'undo redo | formatselect | bold italic underline superscript | bullist numlist | removeformat code',
            plugins: [
                "code", "paste", "lists"
            ],
            paste_as_text: true,
            block_formats: 'Paragraph=p; Header 3=h3; Header 4=h4; Header 5=h5; Header Underline=h6',
            content_css: '/css/tinymce.css?' + new Date().getTime(),
            setup: function(tinyMCE) {
                tinyMCE.on('init', function() {
                    $('[aria-label="Superscript"]').attr('title', 'Footnote')
                });
            },
        })
    }