Install

npm i @thefinder/ckeditor @thefinder/react

Import @thefinder/react/styles.css once in your app; the picker uses it. On the server you need a theFinder endpoint, see @thefinder/core or @thefinder/next.

CKEditor 5

import { ClassicEditor, Essentials, Paragraph, Image, ImageUpload, Link } from "ckeditor5";
import { TheFinder } from "@thefinder/ckeditor";
import "@thefinder/react/styles.css";

ClassicEditor.create(element, {
  licenseKey: "GPL",
  plugins: [Essentials, Paragraph, Image, ImageUpload, Link, TheFinder],
  toolbar: ["bold", "link", "|", "theFinder"],
  theFinder: { endpoint: "/api/files", uploadFolder: "/editor" },
});

CKEditor 4

CKEditor 4 lives on a global CKEDITOR, so the plugin is registered on it:

import { registerTheFinder } from "@thefinder/ckeditor/v4";
import "@thefinder/react/styles.css";

registerTheFinder(window.CKEDITOR);
CKEDITOR.replace("body", {
  extraPlugins: "thefinder,uploadimage",
  theFinder: { endpoint: "/api/files", uploadFolder: "/editor" },
});

The "Browse Server" buttons of the Image and Link dialogs open theFinder's picker as well.

What you get

• A toolbar button that opens the file manager. Images are inserted as images, other files as links (on the selected text, if any).
• Pasted and dropped images are uploaded through theFinder's chunked upload into uploadFolder, which is created when missing.
• The button label follows the editor's UI language (English or Turkish).

Options (theFinder)

| Option | Description | |---|---| | endpoint, headers, credentials, client | How to reach theFinder's API. Default endpoint: /api/files | | uploadFolder | Folder for pasted / dropped images: "/editor" (first volume) or { volume, path }. false keeps the editor's own upload setup | | absoluteUrls | Insert https://site/uploads/a.png instead of /uploads/a.png | | picker | Options for the picker: accept, theme, locale, ... | | openPicker | Replace the built-in picker with your own |

All theFinder packages

| Package | | |---|---| | @thefinder/core | Server engine, drivers, adapters, client | | @thefinder/react | The file manager UI and file picker | | @thefinder/next | Next.js routes, standalone-ready | | @thefinder/ckeditor | CKEditor 5 / 4 connector (this package) |

License

MIT © Alper Koşay