Use The Manager With Any WYSIWYG Editor

• include the manager partial at the same page where you have your editor

@include('MediaManager::extras._editor')

• 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
    })
  }
});

// or globally
tinymce.overrideDefaults({
  // ...
  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
    })
  }
});

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', () => {
      if ($('.modal-manager__Inmodal').length > 0) {
          $('#mce-modal-block').css('z-index', 0)
      }
  })