CKEditor - PDF upload module (like image upload)

[zlitrox]

Hi!

I'm relatively new to the world of Processwire, but so far I'm really impressed by this CMS and its ease, power and speed.

I've been looking at the different field types and also existing CKEditor modules (pwimage and pwlink).

Here's what i want to achieve:

I would like to use or create a own module which allows my admin users to upload pdf files inline in a CKEditor field (page content) the same way images are handled. It should be possible to upload a pdf file and specify its name and from the file uploaded and name i want to show an icon or image inline in editor and the output for that upload should be customized based on the module. Lets make it simple and say that i upload datasheet-1.pdf and want it to be named "My product datasheet", i want the output to be:

<a href="{ link to uploaded pdf file }">My product datasheet</a>

 

Also the uploaded pdf files should be related to the page the user is editing.

 

Is this doable? 

 

Any guidance would be greatly appreciated! Thanks in advance.

PS. I'm a PHP programmer so i know it would require some custom code, but the real question is where do i start, what should it take and is it even possible to do?

[kixe]

2 approaches:

1. Textformatter
   Use a textformatter like https://modules.processwire.com/modules/process-hanna-code/
   or create your own. Use this as a starting point: https://modules.processwire.com/modules/textformatter-page-images/
2. CKEditor Plugin
   Use a Filefield to upload files.
   Enable pwlink module in your CKEditor which allows you to link PW pages and files too.
   Add a css class to show the icon

[zlitrox]

On 2017-07-07 at 6:10 PM, kixe said:

2 approaches:

1. Textformatter
   Use a textformatter like https://modules.processwire.com/modules/process-hanna-code/
   or create your own. Use this as a starting point: https://modules.processwire.com/modules/textformatter-page-images/
2. CKEditor Plugin
   Use a Filefield to upload files.
   Enable pwlink module in your CKEditor which allows you to link PW pages and files too.
   Add a css class to show the icon

 

Hi @kixe

Thanks for your reply (and sorry for my late response)!

I'm trying something like "2. CKEditor Plugin", but not with existing pwlink since it needs further customization.

 

A couple of questions:

1. I'm looking at /wire/modules/Inputfield/InputfieldCKEditor/plugins/pwlink/plugin.js but i can't figure out how to create my own modalUri (var modalUri = config.urls.admin + 'page/image/';). I want to create the following path "https://www.domain.tld/processwire/page/pdf/?id=10&modal=1&modal=1" so that i can implement my own modal. Where do i find this?
2. Do i need to create a module in order to get the above link and be able to create a modal with custom input fields?

[zlitrox]

I'm going to copy pwlink and modify to my needs but I'm stuck with the question:

Where can i create the routing for my modal (iframe url that loads the form created in ProcessPageEditLink.module, in my case ProcessPageEditPDF.module)?

PWlink uses:

https://www.domain.tld/processwire/page/link/?id=10&modal=1&modal=1

I want to use:

https://www.domain.tld/processwire/page/pdf/?id=10&modal=1&modal=1

 

How can i achieve that?

[zlitrox]

I want to clarify the reason i'll modify pwlink instead of using it.

 

Our users/administrators need to be able to click on one button in editor, select the file and write a anchor text and from that input we'll then generate something like this: 

<span class="row"><a href="/path/to/selected/pdf" class="pdf-link">Anchor text written by user</a></span>

 

[kixe]

If I understand you right you want to provide a simple file select if a user click the link icon in the CKEditor. I would do this with a hook in ProcessPageEditLink. Place the code in your ready.php

wire()->addHookAfter('ProcessPageEditLink::execute', null, function ($e) {
    // exit if page OR template doesn't match (modify for your needs)
    $pageID = wire('input')->get('id');
    if ($pageID != 1234) return;
    $templateID = wire('pages')->get($pageID)->template->id;
    if ($templateID != 123) return;

    $form = $this->modules->get("InputfieldForm");
    $form->attr('id', 'ProcessPageEditLinkForm');

    $field = wire('modules')->get('InputfieldSelect');
    $field->label = $this->_("Select File");
    $field->attr('id+name', 'link_page_file');
    $field->icon = 'file-pdf-o';

    // TODO: create an options array (path => label) from files stored in a file field (multi values) via ProcessWire API
    // example
    $options = array('/path/to/file/example.pdf' => 'nicePDF');

    $field->addOption(''); // allow unselect
    $field->addOptions($options);
    $form->add($field);
    // we need something like this to get the nice JS generated preview
    $markup = '<span id="link_page_url_input"></span>';
    $form->set('appendMarkup', $markup);
    $e->return =  $form->render() . "<p class='detail ui-priority-secondary'><code id='link_markup'></code></p>";
});

 

On 14.8.2017 at 4:09 PM, zlitrox said:

<span class="row"> ... </span>

Inside CKEditor?