Skip to content

Kibo/filemanager-js

Repository files navigation

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.

About

The JavaScript filemanager for CKEditor, Quill, TinyMCE.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published