Bjørn, 

I can see we do have a hook to TinyMCE's onChange event and then we trigger a save of the new value to the database.

And we also use editor.execCommand('mceInsertContent', false, "stuff") and it works fine.

Are you sure your code looks something like this:

(function (tinymce, $) {
    tinymce.create('tinymce.plugins.epilink', {
        init: function (ed, url) {                        
            ed.addCommand('mceEPiLink', function () {
                ed.execCommand("mceInsertContent", false, "<input type='number' value='123' />");
            });
            
            ed.addButton('epilink', {
                title: 'epilink.desc',
                cmd: 'mceEPiLink',
                "class": "mce_epilink"
            });
        }
    });
    
    tinymce.PluginManager.add('epilink', tinymce.plugins.epilink);
}(tinymce, epiJQuery));

Hi Bartosz!

Thank you for replying. Below you will find the complete source code. The "special" case with this is that we show an overlay which gives the user some options (for the time beeing it looks awful, but we will fix this later). This might be what causes the issue. 

(function (tinymce) {

    tinymce.create('tinymce.plugins.ContractGeneratorButton', {

        init: function (ed, url) {

            var containerId = 'ContractGenerator_Container';
            var contentId = 'ContractGenerator_Container_Content';
            var insertTextBtnId = 'ContractGenerator_Container_Content_InsertText_Button';
            var insertTextPlaceholderId = 'ContractGenerator_Container_Content_InsertText_Placeholder';
            var insertNumberBtnId = 'ContractGenerator_Container_Content_InsertNumber_Button';
            var insertNumberPlaceholderId = 'ContractGenerator_Container_Content_InsertNumber_Placeholder';
            var insertDateBtnId = 'ContractGenerator_Container_Content_InsertDate_Button';
            var insertDatePlaceholderId = 'ContractGenerator_Container_Content_InsertDate_Placeholder';
            var closeBtnId = 'ContractGenerator_Container_Close';

            ed.onChange.add(function (ed) {
                ed.save();
            });

            ed.addCommand('contractGeneratorPluginCmd', function () {

                function uuidv4() {
                    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                        var v = c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4;
                        return v.toString(16);
                    });
                }

                function onContentChanged() {
                    ed.undoManager.add();
                }

                function insertContent(content) {
                    ed.execCommand('mceInsertContent', false, content);
                    onContentChanged();
                }

                function createElementId(guid) {
                    return 'generator_' + ed.settings.epi_page_context.id + "_" + guid;
                }

                function createElementName(guid) {
                    return 'generator.' + ed.settings.epi_page_context.id + "." + guid;
                }

                function constructSelectionDialog() {
                    var root = document.body;

                    var div = document.createElement('div');
                    div.setAttribute('id', containerId);
                    div.setAttribute('style', 'display: block; position: fixed; z-index: 9999;width: 100%;height: 100%;text-align: center;top: 0;left: 0;background: black;background: rgba(0,0,0,0.8);padding-top:120px;');

                    var innerContainer = document.createElement('div');
                    innerContainer.setAttribute('style', 'width: 45%;height: 55%;margin: 0 auto; position: relative;');

                    var content = document.createElement('div');
                    content.setAttribute('style', 'width: 100%;height: 100%;background: white;text-align: left;');
                    content.setAttribute('id', contentId);

                    var textContainer = document.createElement('div');

                    var insertTextPlaceholder = document.createElement('input');
                    insertTextPlaceholder.setAttribute('id', insertTextPlaceholderId);
                    insertTextPlaceholder.setAttribute('type', 'text');
                    insertTextPlaceholder.setAttribute('placeholder', 'Tipstekst');

                    var insertTextBtn = document.createElement('button');
                    insertTextBtn.setAttribute('id', insertTextBtnId);
                    insertTextBtn.innerHTML = 'Text';
                    insertTextBtn.onclick = function () {
                        var guid = uuidv4();
                        insertContent('<input id="' + createElementId(guid) + '" name="' + createElementName(guid) + '" type="text" class="input-inline editor-added" placeholder="' + insertTextPlaceholder.value + '" />');
                        unloadFrame();
                    };

                    textContainer.appendChild(insertTextBtn);
                    textContainer.appendChild(insertTextPlaceholder);

                    var numberContainer = document.createElement('div');

                    var insertNumberPlaceholder = document.createElement('input');
                    insertNumberPlaceholder.setAttribute('id', insertNumberPlaceholderId);
                    insertNumberPlaceholder.setAttribute('type', 'text');

                    var insertNumberBtn = document.createElement('button');
                    insertNumberBtn.setAttribute('id', insertNumberBtnId);
                    insertNumberBtn.innerHTML = 'Number';
                    insertNumberBtn.onclick = function () {
                        var guid = uuidv4();
                        insertContent('<input id="' + createElementId(guid) + '" name="' + createElementName(guid) + '" type="number" class="input-inline editor-added" placeholder="' + insertNumberPlaceholder.value + '" />');
                        unloadFrame();
                    };

                    numberContainer.appendChild(insertNumberBtn);
                    numberContainer.appendChild(insertNumberPlaceholder);

                    var dateContainer = document.createElement('div');

                    var insertDatePlaceholder = document.createElement('input');
                    insertDatePlaceholder.setAttribute('id', insertDatePlaceholderId);
                    insertDatePlaceholder.setAttribute('type', 'text');
                    insertDatePlaceholder.setAttribute('placeholder', 'dd.mm.yyyy');
                    insertDatePlaceholder.setAttribute('value', 'dd.mm.yyyy');

                    var insertDateBtn = document.createElement('button');
                    insertDateBtn.setAttribute('id', insertDateBtnId);
                    insertDateBtn.innerHTML = 'Date';
                    insertDateBtn.onclick = function () {
                        var guid = uuidv4();
                        insertContent('<input id="' + createElementId(guid) + '" name="' + createElementName(guid) + '" type="date" class="input-inline editor-added js-datepicker" placeholder="' + insertDatePlaceholder.value + '" />');
                        unloadFrame();
                    };

                    dateContainer.appendChild(insertDateBtn);
                    dateContainer.appendChild(insertDatePlaceholder);

                    content.appendChild(textContainer);
                    content.appendChild(numberContainer);
                    content.appendChild(dateContainer);

                    var closeBtn = document.createElement('img');
                    closeBtn.setAttribute('src', '/Util/Editor/tinymce/plugins/ContractGeneratorPlugin/images/close-icon.png');
                    closeBtn.setAttribute('id', closeBtnId);
                    closeBtn.setAttribute('style', 'display: block;position: absolute; z-index: 9999;width: 48px;height: 48px; right: -26px;top: -26px;cursor: pointer; ');
                    closeBtn.onclick = function () {
                        unloadFrame();
                    };

                    innerContainer.appendChild(content);
                    innerContainer.appendChild(closeBtn);

                    div.appendChild(innerContainer);
                    root.appendChild(div);
                }

                function unloadFrame() {
                    var root = document.getElementById(containerId);
                    root.parentNode.removeChild(root);
                }

                constructSelectionDialog();
            });

            ed.addButton('insertContractGeneratorButton', {
                title: 'Insert field',
                cmd: 'contractGeneratorPluginCmd',
                image: '/Util/Editor/tinymce/plugins/ContractGeneratorPlugin/images/cgInsert.png'
            });
        }
    });

    tinymce.PluginManager.add('ContractGeneratorPlugin', tinymce.plugins.ContractGeneratorButton);

})(tinymce);

By replacing the overlay generated by JavaScript with a template using ed.windowManager.open, Episerver finally detected the changes. Not sure why the overlay didn't work, but at least the problem is solved.

Yes, for sure you need to use tinymce's windowManager for showing child dialogs. 

I think the problem with your approach was that episerver actually does not support explicit save, instead the save is usually triggered by the 'blur' event on the editor widget.

Adding a custom child dialog, not backed by tinymce's windowManager might have caused issues with focus and the lack of 'blur' event.

Great that you were able to find it out :)