FileBrowser All its settings are listed here defaultOptions.filebrowser To file browser worked it requires server side . For each operation, View / Edit / Move / Delete You can register a separate server-side script , or use one at all operations . To start configure the file browser itself Jodit web browser does not have restrictions on the display of the file or delete a file or folder , these restrictions should be prescribed on the server side As we can see from the example, all operations have different entry points , such behavior is good for example , but is usually in the server scripts make only one entry point . Rewrite the example under it Callback process function immediately gives us an understanding of what will happen to the web browser at the entrance. Strictly defined only what must return process , but the input he can get anything. For example Next, we describe an example of the server implementation index.php output data format does not need to be json, in settings defaultOptions.filebrowser.ajax You can use the various options. And JSON format can also be different. Now for example, we describe the operation items and folder We now describe the task folder, it is almost identical With all other tasks of identical except that for move it will be available $_REQUEST['file'] - relative path to the file / folder you want to move in $_REQUEST['path'] for create it will be available $_REQUEST['name'] - the name of the directory created for remove it will be available $_REQUEST['target'] - relative path to the file / folder you want to delete Full implementation of all the methods can be found in official PHP connector Also, do not be amiss to customize the appearance of a Web browser . By default, all the features presented in it. But if your connector can not delete files , it is better to remove the delete button Here is an example of all settings ExampleHTMLJavaScript Click and open FileBrowser " />

FileBrowser options

For file browser work module responds FileBrowser

All its settings are listed here defaultOptions.filebrowser

To file browser worked it requires server side . For each operation, View / Edit / Move / Delete You can register a separate server-side script , or use one at all operations . To start configure the file browser itself

new Jodit('#editor', {
    filebrowser: {
        // folder creation operation
        create: {
            url: '../connector/create.php',
        },
        // operation of moving the folder / file
        move: {
            url: '../connector/move.php',
        },
        // the operation to delete the folder / file
        remove: {
            url: '../connector/remove.php',
        },
        // viewing a folder and return the list of files in it
        items: {
            url: '../connector/items.php',
        },
        // viewing a folder and return a list of sub-folders in it
        folder: {
            url: '../connector/tree.php',
        }
    }
});

Jodit web browser does not have restrictions on the display of the file or delete a file or folder , these restrictions should be prescribed on the server side As we can see from the example, all operations have different entry points , such behavior is good for example , but is usually in the server scripts make only one entry point . Rewrite the example under it

new Jodit('#editor', {
    filebrowser: {
        // global setting for all operations
        ajax: {
            url: 'connector/index.php',
            process: function (resp) {
                return {
                    resp.files || [], // {array} The names of files or folders
                    path: resp.path, // {string} Real relative path
                    baseurl: resp.baseurl, // {string} Base url for filebrowser
                    error: resp.error, // {int}
                    msg: resp.msg // {string}
                };
            }
        },
        uploader: {
            url: 'connector/index.php?action=upload'
        },
        // it defaults but still show their
        create: {
            data: {action: 'create'}
        },
        move: {
            data: {action: 'move'}
        },
        remove: {
            data: {action: 'remove'}
        },
        items: {
            data: {action: 'items'}
        },
        folder: {
            data: {action: 'folder'}
        }
    }
});

Callback process function immediately gives us an understanding of what will happen to the web browser at the entrance. Strictly defined only what must return process , but the input he can get anything. For example

new Jodit('#editor', {
    filebrowser: {
        ajax: {
            url: '../connector/index.php',
            dataType: 'text',
            //for example, the server return to us 'cat1.png|cat2.png|cat3.png#&#images/cats/#&#http://xdsoft.net/#&#Cats images'
            process: function (resp) {
                var data = resp.split('#&#');
                return {
                    files: data[0].split('|') || [],
                    path: data[1],
                    baseurl: data[2],
                    error: data.length ? 0 : 1,
                    msg: data[3]
                };
            }
        }
    }
});

Next, we describe an example of the server implementation index.php

<?php
header('Content-Type: application/json');

$root       = realpath(realpath(dirname(__FILE__).'/..').'/images/'). DIRECTORY_SEPARATOR;
$relpath    = isset($_REQUEST['path']) ?  $_REQUEST['path'] : '';
$action     = isset($_REQUEST['action']) ?  $_REQUEST['action'] : 'items';

// always check whether we are below the root category is not reached
$path = $root;
if (realpath($root.$relpath) && strpos(realpath($root.$relpath), $root) !== false) {
    $path = realpath($root.$relpath).DIRECTORY_SEPARATOR;
}

$result = (object)['error'=> 0, 'msg'=>[], 'files'=> [], 'path' => str_replace($root, '', $path)];

function warning_handler($errno, $errstr) {
    global $result;
    $result->error = $errno;
    $result->msg = $errstr;
    exit(json_encode($result));
}

set_error_handler('warning_handler', E_ALL);

if (!$path) {
   trigger_error('Need Path', E_USER_WARNING);
}

switch ($action) {
    case 'items':
        // Here is the code to return all the files in a directory
    break;
    case 'folder':
        // Here is the code for the return of all the subfolders of the folder
    break;
    //...
}

exit(json_encode($result));

output data format does not need to be json, in settings defaultOptions.filebrowser.ajax You can use the various options. And JSON format can also be different. Now for example, we describe the operation items and folder

case 'items':
    $rooturl ='/images/';
    $dir = opendir($path);
    while ($file = readdir($dir)) {
        if (is_file($path.$file) && preg_match('#\.(png|jpg|jpeg|jpg|gif)$#i', $file)) {
            $result->files[] = $file;
        }
    }
break;

We now describe the task folder, it is almost identical

case 'folder':
    $result->files[] = $path == $root ? '.' : '..';
    $dir = opendir($path);
    while ($file = readdir($dir)) {
        if ($file != '.' && $file != '..' && is_dir($path.$file)) {
            $result->files[] = $file;
        }
    }
break;

With all other tasks of identical except that

  • for move it will be available $_REQUEST['file'] - relative path to the file / folder you want to move in $_REQUEST['path']
  • for create it will be available $_REQUEST['name'] - the name of the directory created
  • for remove it will be available $_REQUEST['target'] - relative path to the file / folder you want to delete

Full implementation of all the methods can be found in official PHP connector

Also, do not be amiss to customize the appearance of a Web browser . By default, all the features presented in it. But if your connector can not delete files , it is better to remove the delete button Here is an example of all settings

new Jodit('#editor', {
    filebrowser: {
        howLongShowMsg: 3000,
        createNewFolder: true,
        deleteFolder: true,
        width: '650px',
        height: '400px',
        // if you need only 'select' button then use buttons: ['select']
        buttons: [
            'upload', // files add button
            'remove', // delete files button
            'update', // update Web browser button
            'select'  // File Selection button
        ],
        isSuccess: function (resp) {
            return !resp.error;
        },
        getMsg: function (resp) {
            return resp.msg;
        },
        // Here most part of settings from [jQuery.ajax](http://api.jquery.com/jquery.ajax/0
        ajax: {
            url: '',
            async: true,
            beforeSend: function () {
                return true;
            },
            data: {},
            cache : true,
            contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
            headers : {},
            method : 'POST',
            processData  : true,
            dataType: 'json',

            prepareData: function (data) {
                return data;
            },

            process: function (resp) {
                return {
                    files: resp.files || [],
                    path: resp.path,
                    baseurl: resp.baseurl,
                    error: resp.error,
                    msg: resp.msg
                };
            }
        },
        create: {
            data: {action: 'create'},
        },
        move: {
            data: {action: 'move'},
        },
        remove: {
            data: {action: 'remove'},
        },
        items: {
            data: {action: 'items'},
        },
        folder: {
            data: {action: 'folder'},
        },
        uploader: null // use default Uploader's settings
    }
});

Example

HTML

<textarea id="editor" name="editor"></textarea>
<div><a class="clicker" href="javascript:void(0)">Click and open FileBrowser</a></div>

JavaScript

var jodit = new Jodit('#editor', {
    buttons: [{
        icon: 'image',
        exec: function () {
            this.filebrowser.open();
        }
    }],
    uploader: {
        url: '../connector/index.php?action=upload'
    },
    filebrowser: {
        ajax: {
            url: '../connector/index.php',
            process: function (resp) {
                resp.baseurl = '/files/';
                return resp;
            },
        }
    }
});
$('.clicker').on('click', jodit.filebrowser.open);