CKEditor Image Upload: A Custom Solution for Uploading PDF Files

In ProcessWire, uploading images to CKEditor is a straightforward process. However, when it comes to uploading PDF files, things get a bit more complicated. In this article, we'll explore the possibilities of creating a custom module that allows administrators to upload PDF files inline in a CKEditor field.

Understanding the PWLink Module

To begin with, let's take a closer look at the PWLink module. This module provides a simple file select option when you click on the link icon in CKEditor. However, we need to create our own custom module to achieve this functionality for uploading PDF files.

Creating a Custom Module

To start, we'll need to create a new module in ProcessWire. We can do this by navigating to `/wire/modules/` and clicking on 'Create New Module.' Give your module a name, such as `CKEditorPDFUpload`, and set the type to 'Plugin.'

Next, we'll need to edit the `module.json` file to specify the plugin's settings. In this case, we'll add a new field called `uploadPath` that specifies the directory where uploaded PDF files will be stored.

Hooking into CKEditor

To integrate our custom module with CKEditor, we'll need to hook into the `ProcessPageEditLink` event. This event is triggered whenever a link icon is clicked in CKEditor, allowing us to provide a custom file select option.

Here's an example of how you can use this hook:

```php

$hook->addHook('ProcessPageEditLink', function($event) {

// Code here...

});

```

Creating the File Select Modal

To create a modal with custom input fields, we'll need to use JavaScript. We can achieve this by creating a new plugin.js file in our module's directory.

In this file, we'll define a `modalUri` variable that specifies the URL of the modal window:

```javascript

var modalUri = '/page/image/';

```

We'll also create a function called `createModal()` that will be responsible for generating the modal content:

```javascript

function createModal() {

// Code here...

}

```

Customizing the Upload Process

To customize the upload process, we'll need to override the default `uploadImage` command in CKEditor. We can do this by creating a new function called `uploadPDF()` that will handle the PDF file upload:

```javascript

function uploadPDF() {

// Code here...

}

```

In conclusion, creating a custom module for uploading PDF files to CKEditor is achievable with some PHP and JavaScript coding skills. By hooking into the `ProcessPageEditLink` event, we can provide a custom file select option that allows administrators to upload PDF files inline in a CKEditor field.

With this setup, we can also customize the upload process by overriding the default `uploadImage` command. This will enable us to specify the uploaded PDF file's name and display an icon or image inline in the editor content.

We hope this article has provided you with a good starting point for creating your own custom module for uploading PDF files to CKEditor. Happy coding!

Ckeditor image upload