Merge pull request #4249 from christianbeeznest/OFAJ-19231-ticket

Ticket : Add image picker in editor - refs BT#19231

src/CoreBundle/Component/Editor/CkEditor/CkEditor.php

@@ -66,6 +66,9 @@ class CkEditor extends Editor
         $config['selector'] = '#'.$this->getTextareaId();
         $javascript = $this->toJavascript($config);
 
+        // it replaces [browser] by image picker callback
+        $javascript = str_replace('"[browser]"', $this->getImagePicker(), $javascript);
+
         return "<script>
             document.addEventListener('DOMContentLoaded', function() {
                 tinymce.init(
@@ -138,6 +141,36 @@ class CkEditor extends Editor
         return json_encode($templates);
     }
 
+    /**
+     * Get a custom image picker.
+     *
+     * @return string
+     */
+    private function getImagePicker()
+    {
+        $callback = 'function (cb, value, meta) {
+            var input = document.createElement("input");
+            input.setAttribute("type", "file");
+            input.setAttribute("accept", "image/*");
+            input.onchange = function () {
+                var file = this.files[0];
+                var reader = new FileReader();
+                reader.onload = function () {
+                    var id = "blobid" + (new Date()).getTime();
+                    var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
+                    var base64 = reader.result.split(",")[1];
+                    var blobInfo = blobCache.create(id, file, base64);
+                    blobCache.add(blobInfo);
+                    cb(blobInfo.blobUri(), { title: file.name });
+                };
+                reader.readAsDataURL(file);
+            };
+            input.click();
+        }';
+
+        return $callback;
+    }
+
     /**
      * Get the empty template.
      */

src/CoreBundle/Component/Editor/CkEditor/Toolbar/Basic.php

@@ -181,7 +181,14 @@ class Basic extends Toolbar
         $config['autosave_ask_before_unload'] = true;
         $config['toolbar_mode'] = 'sliding';
 
-        //file_picker_callback : browser,
+        // enable title field in the Image dialog
+        $config['image_title'] = true;
+        // enable automatic uploads of images represented by blob or data URIs
+        $config['automatic_uploads'] = true;
+        // custom filepicker only to Image dialog
+        $config['file_picker_types'] = 'image';
+
+        $config['file_picker_callback'] = '[browser]';
 
         $iso = api_get_language_isocode();
         $url = api_get_path(WEB_PATH);