Nearly-Pickled Module

    kibo-filemanager-js

    1.4.1 • Public • Published

    Filemanager-js

    The easy to use Filemanager for CKEditor, Quill, TinyMCE, ...

    Commands

    • Select path
    • Uploads
    • Create directory
    • Rename
    • Remove

    Properties

    • Lazy loading of directory content
    • Responsive layout
    • Active breadcrumb
    • Sorting by name/ size/ type
    • Uploads multiple files

    Filemanager

    Filemanager

    Filemanager


    1. Try it yourself

    1.1) Clone repository

    git@github.com:Kibo/filemanager-js.git
    

    1.2) Install dependencies

    npm i
    

    1.3) Run it

    npm run serve
    

    1.4) Look at your browser

    localhost:8080
    

    2. Integration with your preferred editor

    2.1) Set editor name in filemanager.config.ts

    • EDITORS.ckeditor4
    • EDITORS.quill
    • EDITORS.tinymce5

    2.2) Set OUTPUT_PATH and PUBLIC_PATH in vue.config.js


    3. Connect the filemanager to your backend API

    • change import in the top of file index.ts
    // Remove this import
    import * as API from "../api/api-mock";
    
    // Uncoment this import for production
    //import * as API from "../api/api-axios";
    

    There are calls to your backend server in file /api/api-axios. You need to implement appropriate methods on your server.

    Do you have a NodeJS project? Hire me! Implementation for filesystem, S3, Dropbox, Cloudinary, Google Drive, ...


    4. Build the Filemanager

    npm run build
    

    5. Connect the Filemanager with your preferred editor

    CKEditor 4

    @see https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browse_upload.html

    var editor = CKEDITOR.replace( 'ckeditor1', {
      filebrowserBrowseUrl: "/vendor/kibo-filemanager/index.html"
    });
    

    Quill 1.3.7

    @see https://quilljs.com/docs/modules/toolbar/#handlers

    The filemanager creates image and link dialog too. You're welcome.

    LinkDialog LinkDialog

    var quill1 = new Quill('#editor', {
      theme: 'snow'
    });
    
    var toolbar = quill1.getModule('toolbar');
    toolbar.addHandler('image', setImage);
    function setImage(value){
      window.open("/vendor/kibo-filemanager/index.html?iname=quill1&filter=image", "filemanager", "height=768,width=1024");
    }
    
    toolbar.addHandler('link', setLink);
    function setLink(value){
      window.open("/vendor/kibo-filemanager/index.html?iname=quill1&filter=link", "filemanager", "height=768,width=1024");
    }
    

    This creates new handlers for image and link. Pls, notice that there are params in filemanager URL: iname and filter.

    • param iname means instance name, and value is the name of quill variable. In this case quill1. This is for case you use multiple instances of quill.
    • param filter means filter, and open image or link dialog.

    TyniMCE 5

    @see https://www.tiny.cloud/docs/configure/file-image-upload/#file_picker_callback

    tinymce.init({
      selector: '#mytextarea',
      height: 500,
      plugins: ['link image'],
      toolbar: 'link image',
      file_picker_callback: function (callback, value, meta) {
            var type = meta.filetype;
            var field_name = 'tinymce-5';
            var w = window,
                d = document,
                e = d.documentElement,
                g = d.getElementsByTagName('body')[0],
                x = w.innerWidth || e.clientWidth || g.clientWidth,
                y = w.innerHeight || e.clientHeight || g.clientHeight;
    
            var cmsURL = '/vendor/kibo-filemanager/index.html?&field_name=' + field_name + '&langCode=en';
    
            if (type == 'image') {
                cmsURL = cmsURL + "&type=images";
            }
            tinymce.activeEditor.windowManager.openUrl({
                url: cmsURL,
                title: 'Filemanager',
                width: x * 0.8,
                height: y * 0.8,
                resizable: "yes",
                close_previous: "no",
                onMessage: function (api, data) {
                    if (data.mceAction === 'customAction') {
                        callback(data.url);
                        api.close();
                    }
                }
            });
        }
    });
    

    6. Congratulation

    Buy Me A Coffee


    Development

    • There is method onSelect() in file /src/components/Filemenager.vue. It returns an URL of selected file.
    • There are integration files for every editor.
    • The Node (file, directory) has to implement this INode interface.

    Project setup

    npm install
    

    Compiles and hot-reloads for development

    npm run serve
    

    Compiles and minifies for production

    npm run build
    

    Run your unit tests

    npm run test:unit
    

    Customize configuration

    See Configuration Reference.

    Install

    npm i kibo-filemanager-js

    DownloadsWeekly Downloads

    8

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    486 kB

    Total Files

    37

    Last publish

    Collaborators

    • kibo18