CODEWITHSUNDEEP
javascriptjquerytinymcetinymce-5
Dmitry_allread_return
Dmitry_allread_return

Reputation: 127

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?

Upvotes: 0

Views: 798

Answers (1)

Dmitry_allread_return
Dmitry_allread_return

Reputation: 127

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')
            });
        },
    })
}

Upvotes: 2

Related Questions