How to use the filebrowser module without Jodit

You can use the Jodit file browser without the editor itself. The module is available through the namespace of the modules:

console.log(Jodit.modules.FileBrowser);
console.log(Jodit.modules.FileBrowserPro); // FOR PRO/OEM VERSION
Copy

For example, you have a field with a button, and you want to fill in the field after selecting a file:

Imperative way

<script>
	const fb = new Jodit.modules.FileBrowser({
		ajax: {
			url: 'https://sitename.com/connector/index.php'
		}
	});

	function openFb() {
		fb.open((images) => {
			document.getElementById('fileName').value = images.files[0];
		});
	}
</script>

<form>
	<input type="text" readonly id="fileName" />
	<button onclick="openFb()" type="button">Select</button>
</form>
Copy

Result

Layout way

You can also display a file browser directly in your layout, without a modal window, but this can only be done in the PRO version

<input type="text" readonly id="fileName" />
<div id="someWrapper"></div>
<script>
	const browser = new Jodit.modules.FileBrowserPro({
		uploader: {
			url: 'https://sitename.net/jodit/finder/?action=fileUpload'
		},
		ajax: {
			url: 'https://sitename.net/jodit/finder/'
		}
	});
	browser.setMod('static', true).open((images) => {
		document.getElementById('fileName').value = images.files[0];
	});

	const wrapper = document.getElementById('someWrapper');
	wrapper.appendChild(browser.container);
</script>
Copy

Result