TinyMCE plugins, blogposts: https://devblog.gosso.se/?p=792 https://devblog.gosso.se/?p=796

editor_plugin_img.js

"use strict";
var tinymce = tinymce || {};
//Register the plugin
tinymce.PluginManager.add('customimagebuttonplugin', function (editor, url) {

    //your custom logic when button clicked
    editor.addCommand('tinymcecustombutton', function () {
        var isUpdate = false;

        //default values 
        var align = "left";
        var width = "50%";
        var description = "";

        //On open
        if (editor.selection.getNode().parentElement.tagName === "DIV"
            && editor.selection.getNode().parentElement.className.includes("image")) {
            width = editor.selection.getNode().parentElement.style.maxWidth;
            description = editor.selection.getNode().parentElement.textContent;
            align = editor.selection.getNode().parentElement.className.replace("image", "");
            isUpdate = true;
        } 

        // Open window
        editor.windowManager.open({
            title: 'Image description',
            body: [
                { type: 'textbox', name: 'description', label: 'Description', value: description },
                { type: 'textbox', name: 'width', label: 'Width (px eller %)', value: width },
                {
                    type: 'listbox',
                    name: 'align',
                    label: 'Align',
                    values: [
                        { text: 'Left', value: 'left' }, //tinymce.DOM.decode("V&auml;nster") <-- for swedish
                        { text: 'Right', value: 'right' },
                        { text: 'Center', value: 'center' }
                    ],
                    value: align // Sets the default
                }
            ],
            onsubmit: function (e) {
                var alignmentclass = 'image' + e.data.align;
                var selectedimg = editor.selection.getNode();
                var width = e.data.width;
                if (width !== undefined && !width.includes("px") && !width.includes("%")) {
                    if (width > 100)
                        width += "px";
                    else if (width === "")
                        width = "50%";
                    else
                        width += "%";
                }

                if (isUpdate) {
                    selectedimg.parentElement.dataset.mceStyle = "max-width: " + width;
                    window.tinyMCE.DOM.setStyle(selectedimg.parentElement, "max-width", width);
                    selectedimg.parentElement.className = alignmentclass;
                    selectedimg.parentElement.childNodes[1].innerText = e.data.description;
                } else { //first time use
                    if (selectedimg.src) {
                        var arr = selectedimg.src.split("/");
                        var src = "/" + arr.splice(3, arr.length).join("/");
                        editor.selection.setContent('<div style=max-width:' +
                            width +
                            ' class=' +
                            alignmentclass +
                            '><img src=' +
                            src +
                            ' class="img-responsive" alt="" /><p>' +
                            e.data.description +
                            '</p></div>');
                    }
                }
            }
        });
    });

    // Register custom button
    editor.addButton('customimagebuttonplugin', {
        title: 'Image description',
        cmd: 'tinymcecustombutton',
        image: url + '/img/image.png',
        onpostrender: monitorNodeChange
    });

    //highlight the button when IMG is selected
    function monitorNodeChange() {
        var btn = this;
        editor.on('NodeChange',
            function (e) {
                btn.disabled(!e.element ||
                    !e.element.nodeName ||
                    e.element.nodeName.toLowerCase() !== "img");
            });
    }

    //information shown on help-button
    return {
        getMetadata: function () {
            return {
                name: 'Image description plugin',
                url: 'https://devblog.gosso.se/?p=792'
            };
        }
    };
});

editor_plugin_plate.js

"use strict";
var tinymce = tinymce || {};
//Register the plugin
tinymce.PluginManager.add('customplateplugin', function (ed, url) {// ed as editor

    var cssClass = "plate";// your classname
    //your custom logic when button clicked
    ed.addCommand('customplatecmd', function () {
        if (ed.selection.getNode().parentElement.className === cssClass) {
                    var bm = ed.selection.getBookmark();
                    ed.selection.getNode().parentElement.outerHTML = ed.selection.getNode().parentElement.innerHTML;
                    ed.selection.moveToBookmark(bm);
                }
        else if (ed.selection.getNode().parentElement.parentElement != undefined &&
                ed.selection.getNode().parentElement.parentElement.className === cssClass) {
                    var bm = ed.selection.getBookmark();
                    ed.selection.getNode().parentElement.parentElement.outerHTML = ed.selection.getNode().parentElement.parentElement.innerHTML;
                    ed.selection.moveToBookmark(bm);
        }
        else {

            if (ed.selection.getSelectedBlocks().length > 1) {
                ed.selection.setContent('<div class="' + cssClass+'">' +
                    ed.selection.getContent() +
                    '</div>');
                ed.focus();
            }
            else {
                if (ed.selection.getNode().nodeName === "P") {
                    // Stores a bookmark of the current selection
                    var bm = ed.selection.getBookmark();
                    ed.selection.select(ed.selection.getNode(), true);
                    ed.selection.setContent('<div class="' + cssClass+'">' +
                        ed.selection.getNode().outerHTML +
                        '</div>');
                    // Restore the selection bookmark
                    ed.selection.moveToBookmark(bm);
                }
                else if (ed.selection.getNode().parentNode.nodeName === "P") {
                    ed.selection.select(ed.selection.getNode().parentNode, true);
                    ed.selection.setContent('<div class="' + cssClass+'">' +
                        ed.selection.getNode().outerHTML +
                        '</div>');
                }
                ed.focus();
            }
        }
     });

    // Register custom button
    ed.addButton('customplateplugin', {
        title: 'Plate',
        cmd: 'customplatecmd',
        image: url + '/img/plate.png',
        onclick: function () {
            ed.focus();
            //ed.selection.setContent('Hello world!');
            window.tinyMCE.activeEditor.execCommand('customplatecmd');
        }
        , onpostrender: monitorNodeChange //remove this if you would be able to mark several blocks
    });

    // Add a node change handler, selects the button in the UI when a P tag is selected
    function monitorNodeChange() {
        var btn = this;
        ed.on('NodeChange',
            function (e) {
                btn.disabled(!e.element || !e.element.nodeName ||
                    (e.element.nodeName.toLowerCase() !== "p" && e.element.parentNode.nodeName.toLowerCase() !== "p"));//
            });
    }

    return {
        getMetadata: function () {
            return {
                name: 'Gray plate plugin',
                url: 'https://devblog.gosso.se/?p=796'
            };
        }
    };
 });