Drag and drop image files (Feature)

I made a small prototype in order to make the editor field accept Kirby typical file drag and drop events. It's far from being perfect, cause I'm stronger with design and Frontend stuff.

The concept is to drop the typical kirby image tag (image:myimage.jpg) to the editor and convert the string to a html image tag. Also the filepath to the content folder needs to be inserted. After a click on Save page in the panel, the image is visible in the editor. (It may still need a second save to recognize the image by the editor or a double click on the image.)

ckeditor.php

// Set up wrapping element
        …
        // save the content url or directory path for javascript as an data-attribute
        $wrapper->data('path', $this->page()->diruri());

create new ckeditorfield.js file (in a similar way like this is done in VisualMarkdownEditor)

…
// the main part after creating the field function and setting the wrapper
self.$wrapper.droppable({
            hoverClass: 'ckeditorfield-wrapper-over',
            accept: self.draggable,
            drop: function (event, element) {
        var dropdata = element.draggable.data('text');
        var contentpath = self.$wrapper.attr('data-path');
        var HTMLImg = "&lt;img src='/content/" + contentpath + "/";
        var drophtml = dropdata.replace( '(image: ' , HTMLImg ).replace(")" , "'&gt;");
        var html = $.parseHTML( drophtml );
                $('div.cke_textarea_inline').append(html);
            }
        });
…

fishme / kirby_ckeditor

Drag and drop image files (Feature) #4