Use The Manager With Any WYSIWYG Editor

First check How To Use The Manager From A Modal.

• depends on your editor of choice, the implementation may vary, but here is what you need to do
  • have a way to trigger the manager modal button $('.__Inmodal-editor').click()
  • listen for when a file is selected and insert it into your editor EventHub.listen('file_selected', (path) => {...})

• so for example using tinymce

tinymce.init({
  // ...
  file_browser_callback(field_name, url, type, win) {
    let field = win.document.getElementById(field_name)
    $('.__Inmodal-editor').click()

    EventHub.listen('file_selected', (path) => {
      if (field) field.value = path
    })
  },

  // (optional) close the manager when pressing "OK"
  init_instance_callback(editor) {
    editor.on('BeforeSetContent', () => {
      $('.__Inmodal-editor-hide').click()
    })
  },
});

and thats it 👍 👏 🏆

Note

• for tinymce, the overlay has a very high & crazy z-index which would pretty much overlap anything, so to get around that you can use

  document.addEventListener('DOMSubtreeModified', () => {
      let modal = document.getElementById('mce-modal-block')
  
      if (modal) {
          Array.from(document.querySelectorAll('.modal-manager__Inmodal')).length > 0
              ? modal.style.zIndex = '0'
              : modal.style.zIndex = '10'
  })