custom tinymce 5 file browser and picker

filepicker.js

(function() {

    $().ready(function() {
        var adminUrl = $('body').data('route-admin');

        window.initWYSIWYG = function(mediaContent) {

          tinymce.init({
              selector: '.wysiwyg',
              height: 500,
              language: 'de',
              language_url: 'mcms/node_modules/tinymce-i18n/langs/de.js',
              toolbar: "undo redo | formatselect | bold italic strikethrough forecolor backcolor | image | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat | styleselect | code",
              images_upload_handler: function (blobInfo, success, failure) {
                  var xhr, formData;
              
                  xhr = new XMLHttpRequest();
                  xhr.withCredentials = false;
                  xhr.open('POST', adminUrl + '/media/upload');
              
                  xhr.onload = function() {
                    var json;
              
                    if (xhr.status < 200 || xhr.status >= 300) {
                      failure('Die Datei konnte nicht hochgeladen werden');
                      return;
                    }
              
                    json = JSON.parse(xhr.responseText);
              
                    if (!json) {
                      failure('Da ist wohl etwas schief gelaufen');
                      return;
                    }
                    
                    if (json.error) {
                      failure(json.error);
                      return;
                    }
              
                    if (!json.success || !json.location) {
                      failure('Da ist wohl etwas schief gelaufen');
                      return;
                    }

                    success(json.location);
                  };
              
                  formData = new FormData();
                  formData.append('file', blobInfo.blob(), blobInfo.filename(blobInfo));
              
                  xhr.send(formData);
              },
              templates: '/mcms_admin/page/wysiwyg_templates',
              branding: false,
              resize: true,
              style_formats: [
                  {title: 'Rechts umfließend', selector: 'img', styles: { 'float' : 'left', 'margin': '0 10px 0 10px' }},
                  {title: 'Links umfließend', selector: 'img', styles: { 'float' : 'right', 'margin': '0 10px 0 10px' }},
                  {title: 'Responsive Image', selector: 'img', classes: 'img-fluid'}
              ],
              relative_urls: false,
              image_advtab: true,
              images_reuse_filename: true,
              plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link code media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern help filemanager emoticons',
              browser_spellcheck: true,
              file_picker_callback: function(callback, value, meta) {
                window.tinymceDialog = {
                  title: "Bild auswählen",
                  size: 'large',
                  body : {
                    type: 'panel',
                    items: [
                      {
                        name: 'htmlContent',
                        type: 'iframe',
                        sandboxed: false
                      }
                    ]
                  },
                  buttons: [
                    {
                      type: 'custom',
                      name: 'navigateBack',
                      text: 'zurück',
                      align: 'start'
                    },
                    {
                      type: 'cancel',
                      name: 'cancel',
                      text: 'Cancel'
                    },
                    {
                      type: 'custom',
                      name: 'selectThumb',
                      text: 'Vorschaubild auswählen',
                      disabled: true
                    },
                    {
                      type: 'submit',
                      name: 'selectImage',
                      text: 'Bild auswählen',
                      primary: true,
                      disabled: true
                    }
                  ],
                  initialData: { 
                    htmlContent: mediaContent,
                    url: false,
                  },
                  onSubmit: function (api) {
                    var fileUrl = $('.tox-dialog__body iframe:last').contents().find('[data-name="full_path"]').text();
                    callback(fileUrl);
                    api.close();
                  },
                  onAction: function (api, actionData) {
                    if (actionData.name === 'selectThumb') {
                      var fileUrl = $('.tox-dialog__body iframe:last').contents().find('[data-name="thumbnail_path"]').text();
                      callback(fileUrl);
                      api.close();
                    }
                    if (actionData.name === 'navigateBack') {
                      $('.tox-dialog__body iframe:last').contents().find('.navigate-back').get(0).click();
                    }
                  }

                };
                var _this = this;
                var instance = tinymce.activeEditor.windowManager.open(window.tinymceDialog);
                var findFrame = function(callback) {
                  var found = false;
                  $('iframe').each(function(index, element) {
                    if (element != _this.iframeElement) {
                      callback(element);
                      found = true;
                      // break
                      return false;
                    }
                  })
                  if (!found) {
                    setTimeout(function() {
                      findFrame(callback)
                    }, 200);
                  }
                };
                findFrame(function(iframe) {
                  $(iframe).on('load', function(e) {
                    if (iframe.contentWindow.location.href.indexOf('variants-sa') > -1) {
                      instance.enable('selectThumb');
                      instance.enable('selectImage');
                      instance.enable('navigateBack');
                    } else {
                      instance.disable('selectThumb');
                      instance.disable('selectImage');
                      instance.disable('navigateBack');
                    }
                  });
                });

              },
              content_css: "/mcms/css/wysiwyg-content-style.css"
          });
      };

      $.get(adminUrl + '/media/list-sa?sa=true', function(mediaContent) {
        window.initWYSIWYG(mediaContent);
      });

    });

})();