TinyMCE 4 - add custom styles/classes/attributes to any HTML tag

Question

Is there any plugin / possibility to allow adding custom attributes to HTML tags by TinyMCE 4 WYSIWYG?

For example, I have added this code via editor (not by the source code):

<div dir="ltr">
    <a href="/uploads/myfile.pdf">My file<img src="/uploads/icons/pdf-icon.jpg" alt="My file" width="40" height="40" /></a>
</div>

All I need is to add, for example, class="mypdffile" or data-xxx="someval" attributes to <div> tag which is viewed in above code.

How can I do this without changing config object in tinymce.init?

Answer 1

Through the init you can add a styles menu to your editor in which you can create a style which applies to div's and call it class="mypdffile"

tinymce.init({
    style_formats: [
        {title: 'My PDF file', selector: 'div', classes: 'mypdffile'}
    ]
});