Integrated TinyMCE

.gitignore

@@ -6,4 +6,5 @@ Homestead.yaml
 .idea
 /public/plugins
 /public/css
+/public/bower
 /storage/images

app/Http/Controllers/ImageController.php

@@ -5,6 +5,8 @@ namespace Oxbow\Http\Controllers;
 use Illuminate\Filesystem\Filesystem as File;
 use Illuminate\Http\Request;
 
+use Intervention\Image\Facades\Image as ImageTool;
+use Illuminate\Support\Facades\DB;
 use Oxbow\Http\Requests;
 use Oxbow\Image;
 
@@ -61,6 +63,49 @@ class ImageController extends Controller
         abort(404);
     }
 
+    /**
+     * Get all images, Paginated
+     * @param int $page
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function getAll($page = 0)
+    {
+        $pageSize = 25;
+        $images = DB::table('images')->orderBy('created_at', 'desc')
+            ->skip($page*$pageSize)->take($pageSize)->get();
+        foreach($images as $image) {
+            $image->thumbnail = $this->getThumbnail($image, 150, 150);
+        }
+        return response()->json($images);
+    }
+
+    /**
+     * Get the thumbnail for an image.
+     * @param $image
+     * @param int $width
+     * @param int $height
+     * @return string
+     */
+    public function getThumbnail($image, $width = 220, $height = 220)
+    {
+        $explodedPath = explode('/', $image->url);
+        array_splice($explodedPath, 3, 0, ['thumbs-' . $width . '-' . $height]);
+        $thumbPath = implode('/', $explodedPath);
+        $thumbFilePath = storage_path() . $thumbPath;
+        if(file_exists($thumbFilePath)) {
+            return $thumbPath;
+        }
+
+        //dd($thumbFilePath);
+        $thumb = ImageTool::make(storage_path() . $image->url);
+        $thumb->fit($width, $height);
+        if(!file_exists(dirname($thumbFilePath))) {
+            mkdir(dirname($thumbFilePath), 0775, true);
+        }
+        $thumb->save($thumbFilePath);
+        return $thumbFilePath;
+    }
+
     /**
      * Handles image uploads for use on pages.
      * @param Request $request
@@ -69,7 +114,7 @@ class ImageController extends Controller
     public function upload(Request $request)
     {
         $imageUpload = $request->file('file');
-        $name = $imageUpload->getClientOriginalName();
+        $name = str_replace(' ', '-', $imageUpload->getClientOriginalName());
         $imagePath = '/images/' . Date('Y-m-M') . '/';
         $storagePath = storage_path(). $imagePath;
         $fullPath = $storagePath . $name;
@@ -82,7 +127,7 @@ class ImageController extends Controller
         $this->image->name = $name;
         $this->image->url = $imagePath . $name;
         $this->image->save();
-        return response()->json(['link' => $this->image->url]);
+        return response()->json($this->image);
     }
 
 

app/Http/routes.php

@@ -31,6 +31,8 @@ Route::group(['prefix' => 'books'], function() {
 
 Route::post('/upload/image', 'ImageController@upload');
 
+Route::get('/images/all', 'ImageController@getAll');
+Route::get('/images/all/{page}', 'ImageController@getAll');
 Route::get('/images/{any}', 'ImageController@getImage')->where('any', '.*');
 
 Route::get('/', function () {

app/Image.php

@@ -6,5 +6,8 @@ use Illuminate\Database\Eloquent\Model;
 
 class Image extends Model
 {
-    //
+    public function getFilePath()
+    {
+        return storage_path() . $this->url;
+    }
 }

resources/assets/sass/styles.scss

@@ -25,4 +25,70 @@ header .menu {
   display: block;
   width: 100%;
   font-size: 1.4em;
+}
+
+.overlay {
+  background-color: rgba(0, 0, 0, 0.2);
+  position: fixed;
+  display: block;
+  z-index: 95536;
+  width: 100%;
+  height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+#image-manager {
+  background-color: #EEE;
+  max-width: 90%;
+  max-height: 90%;
+  width: 90%;
+  height: 90%;
+  margin: 2% 5%;
+  //border: 2px solid $primary;
+  border-radius: 4px;
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  .image-manager-display img {
+    width: 150px;
+    height: 150px;
+    display: inline-block;
+    margin: $-s 0 0 $-s;
+    cursor: pointer;
+  }
+}
+.image-manager-left {
+  background-color: #FFF;
+  height: 100%;
+  width: 100%;
+  text-align: left;
+  .image-manager-display {
+    height: 75%;
+    width: 100%;
+    text-align: left;
+    overflow-y: scroll;
+  }
+}
+
+.image-manager-title {
+  font-size: 2em;
+  text-align: left;
+  margin: 0 $-m;
+  padding: $-xl $-m;
+  color: #666;
+  border-bottom: 1px solid #DDD;
+}
+
+.image-manager-dropzone {
+  background-color: lighten($primary, 40%);
+  height: 25%;
+  text-align: center;
+  font-size: 2em;
+  line-height: 2em;
+  padding-top: $-xl*1.2;
+  color: #666;
+  border-top: 2px solid $primary;
 }

resources/views/pages/edit.blade.php

@@ -1,9 +1,9 @@
 @extends('base')
 
 @section('head')
-    <link rel="stylesheet" href="/plugins/css/froala_editor.min.css">
+    <script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script>
-    <link rel="stylesheet" href="/plugins/css/froala_style.min.css">
+    <script src="/bower/dropzone/dist/min/dropzone.min.js"></script>
-    <script src="/plugins/js/froala_editor.min.js"></script>
+    <script src="/js/image-manager.js"></script>
 @stop
 
 @section('content')
@@ -12,15 +12,52 @@
         @include('pages/form', ['model' => $page])
     </form>
 
+    <section class="overlay" style="display:none;">
+        <div id="image-manager">
+            <div class="image-manager-left">
+                <div class="image-manager-header">
+                    <button type="button" class="button neg float right" data-action="close">Close</button>
+                    <div class="image-manager-title">Image Library</div>
+                </div>
+                <div class="image-manager-display">
+                </div>
+                <form action="/upload/image" class="image-manager-dropzone">
+                    {{ csrf_field() }}
+                    Drag images or click here to upload
+                </form>
+            </div>
+            {{--<div class="sidebar">--}}
+
+            {{--</div>--}}
+        </div>
+    </section>
+
     <script>
         $(function() {
-            $('#html').editable({
+            //ImageManager.show('#image-manager');
-                inlineMode: false,
+
-                imageUploadURL: '/upload/image',
+            tinymce.init({
-                imageUploadParams: {
+                selector: '.edit-area textarea',
-                    '_token': '{{ csrf_token() }}'
+                content_css: '/css/app.css',
+                body_class: 'container',
+                plugins: "autoresize image table textcolor paste link imagetools",
+                content_style: "body {padding-left: 15px !important; padding-right: 15px !important;}",
+                file_browser_callback: function(field_name, url, type, win) {
+                    ImageManager.show('#image-manager', function(image) {
+                        win.document.getElementById(field_name).value = image.url;
+                        if ("createEvent" in document) {
+                            var evt = document.createEvent("HTMLEvents");
+                            evt.initEvent("change", false, true);
+                            win.document.getElementById(field_name).dispatchEvent(evt);
+                        } else {
+                            win.document.getElementById(field_name).fireEvent("onchange");
+                        }
+                    });
                 }
             });
+
+
+
         });
     </script>
 @stop