Jodit Finder

Enhanced file browser for Jodit with many additional features and improved interface.

Advantages

• Dark and light themes, switchable from the interface.
• Ability to change file browser settings directly in the interface.
• Folders in a tree view.
• Ability to add an image, file, or folder to the Favorites section.
• Navigation history with buttons: home, forward, and back.
• 5 tile display modes: very small, small, default, large, and very large.
• Display mode as compact labels and icons.
• Folders inside the items section like in Explorer. You can hide the tree section.
• Partial loading with infinite scrolling.
• Quick preview of images.
• Preview of office documents.

Usage with Jodit

const jodit = Jodit.make('#editor', {
    filebrowser: {
        ajax: {
            url: 'https://xdsoft.net/jodit/finder/'
        },
        uploader: {
            url: 'https://xdsoft.net/jodit/finder/?action=fileUpload'
        }
    }
});

jodit.filebrowser.open((images) => {
    console.log('Selected:', images);
}, true); // true - show only images
Copy

The entire list of settings is available just like in the free version

Usage without Jodit

const fb = new Jodit.modules.FileBrowserPro({
    ajax: {
        url: 'https://xdsoft.net/jodit/finder/'
    },
    uploader: {
        url: 'https://xdsoft.net/jodit/finder/?action=fileUpload'
    }
});

fb.open((images) => {
    console.log('Selected:', images);
}, true); // true - show only images
Copy

Options

previewOfficeURL

• Type: String
• Default: "https://view.officeapps.live.com/op/view.aspx?src="

URL for opening office documents in the preview window in an iframe.

Jodit.make('#editor', {
    filebrowser: {
        previewOfficeURL: "https://view.officeapps.live.com/op/view.aspx?src="
    }
});
Copy

buttons

• Type: Array
• Default:

[
    'filebrowser.home',
    'filebrowser.previous',
    'filebrowser.next',
    '|',
    'filebrowser.upload',
    'filebrowser.new-folder',
    'filebrowser.remove',
    'filebrowser.update',
    'filebrowser.select',
    'filebrowser.edit',
    '|',
    'filebrowser.preview',
    'about'
]
Copy

Array of buttons for the file browser toolbar.

Jodit.make('#editor', {
    filebrowser: {
        buttons: [
            'filebrowser.home',
            'filebrowser.upload',
            'filebrowser.remove',
            'filebrowser.update',
            'filebrowser.select'
        ]
    }
});
Copy

sort

• Type: Boolean
• Default: false

Enables or disables sorting of files and folders.

Jodit.make('#editor', {
    filebrowser: {
        sort: true
    }
});
Copy

pixelOffsetLoadNewChunk

• Type: Number
• Default: 300

Pixel offset for loading a new chunk during infinite scrolling.

Jodit.make('#editor', {
    filebrowser: {
        pixelOffsetLoadNewChunk: 500
    }
});
Copy

width

• Type: Number
• Default: 800

Width of the file browser window.

Jodit.make('#editor', {
    filebrowser: {
        width: 1000
    }
});
Copy

height

• Type: Number
• Default: 400

Height of the file browser window.

Jodit.make('#editor', {
    filebrowser: {
        height: 600
    }
});
Copy

maxWidth

• Type: Number
• Default: Not set

Maximum width of the file browser window.

Jodit.make('#editor', {
    filebrowser: {
        maxWidth: 1200
    }
});
Copy

State Settings

The following settings can be changed through the file browser interface:

theme

• Type: String
• Default: "default"
• Possible values: "default", "dark"

File browser theme.

showSideBar

• Type: Boolean
• Default: true

Show or hide the sidebar.

showFavorites

• Type: Boolean
• Default: true

Show or hide the favorites section.

showSettings

• Type: Boolean
• Default: false

Show or hide settings.

showPreview

• Type: Boolean
• Default: false

Show or hide preview.

withFolders

• Type: Boolean
• Default: true

Show folders together with files in the main list.

foldersPosition

• Type: String
• Default: "bottom"
• Possible values: "top", "bottom", "default"

Position of folders in the file list.

tileSize

• Type: String
• Default: "default"
• Possible values: "xsmall", "small", "default", "large", "xlarge"

Size of tiles in tile display mode.

Examples

Basic Usage

const jodit = Jodit.make('#editor', {
    extraPlugins: ['finder'],
    filebrowser: {
        ajax: {
            url: 'https://xdsoft.net/jodit/finder/'
        },
        uploader: {
            url: 'https://xdsoft.net/jodit/finder/?action=fileUpload'
        }
    }
});

// Open file browser
jodit.filebrowser.open((files) => {
    console.log('Selected:', files);
});
Copy

Configuring Size and Appearance

const jodit = Jodit.make('#editor', {
    extraPlugins: ['finder'],
    filebrowser: {
        width: 1000,
        height: 600,
        theme: 'dark',
        tileSize: 'large',
        buttons: [
            'filebrowser.home',
            'filebrowser.upload',
            'filebrowser.new-folder',
            'filebrowser.remove',
            'filebrowser.select'
        ]
    }
});
Copy

Configuring Office Document Preview

const jodit = Jodit.make('#editor', {
    extraPlugins: ['finder'],
    filebrowser: {
        previewOfficeURL: "https://docs.google.com/viewer?embedded=true&url="
    }
});
Copy

Usage without Jodit

// Create a file browser instance
const fb = new Jodit.modules.FileBrowserPro({
    ajax: {
        url: 'https://xdsoft.net/jodit/finder/'
    },
    uploader: {
        url: 'https://xdsoft.net/jodit/finder/?action=fileUpload'
    },
    width: 1000,
    height: 600,
    theme: 'dark'
});

// Open the file browser
fb.open((files) => {
    // Process selected files
    if (files.length) {
        const fileUrls = files.map(file => file.fileURL);
        console.log('Selected files:', fileUrls);
    }
});
Copy

Programmatic State Management

const jodit = Jodit.make('#editor', {
    extraPlugins: ['finder']
});

// Open file browser
jodit.filebrowser.open((files) => {
    console.log('Selected:', files);
});

// Change state programmatically
jodit.filebrowser.state.theme = 'dark';
jodit.filebrowser.state.tileSize = 'large';
jodit.filebrowser.state.showSideBar = false;
Copy