Using the MODX File Browser Outside TinyMCE in Custom Modules

One of the recurring problems in older MODX Evolution projects was how to let editors or module users choose files and images without building a separate media UI from scratch. This pattern shows how to reuse the built-in browser that TinyMCE was already using.

The value of the approach is simple: instead of writing another homemade picker, you can call the manager browser, let the user browse assets/images or assets/files, and push the selected URL back into the current form field.

Core idea

The solution wraps the manager browser in a small JavaScript helper. A field ID is stored before opening the popup window, and once the browser returns a file path, that path is written back into the original input.

var currentBrowserItemId;
function BrowseServer(id, type) {
    currentBrowserItemId = id;
    OpenServerBrowser('/manager/media/browser/mcpuk/browser.html?Type=' + type + '&Connector=/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/', screen.width * 0.7, screen.height * 0.7);
}
function SetUrl(url) {
    var field = document.getElementById(currentBrowserItemId);
    if (field) field.value = url;
}

Why it mattered historically

Small integration patterns like this are part of what made Evolution useful for custom manager tooling. Teams did not need to wait for a full package ecosystem to solve every UI problem. They could wire the existing manager pieces into their own modules and move faster.