Dan Brown

Added chrome paste-image-upload. Closes #20.

...@@ -7,7 +7,6 @@ use Illuminate\Http\Request; ...@@ -7,7 +7,6 @@ use Illuminate\Http\Request;
7 use Illuminate\Support\Facades\Auth; 7 use Illuminate\Support\Facades\Auth;
8 use Intervention\Image\Facades\Image as ImageTool; 8 use Intervention\Image\Facades\Image as ImageTool;
9 use Illuminate\Support\Facades\DB; 9 use Illuminate\Support\Facades\DB;
10 -use BookStack\Http\Requests;
11 use BookStack\Image; 10 use BookStack\Image;
12 use BookStack\Repos\PageRepo; 11 use BookStack\Repos\PageRepo;
13 12
...@@ -37,13 +36,13 @@ class ImageController extends Controller ...@@ -37,13 +36,13 @@ class ImageController extends Controller
37 public function getAll($page = 0) 36 public function getAll($page = 0)
38 { 37 {
39 $pageSize = 30; 38 $pageSize = 30;
40 - $images = DB::table('images')->orderBy('created_at', 'desc') 39 + $images = $this->image->orderBy('created_at', 'desc')
41 ->skip($page * $pageSize)->take($pageSize)->get(); 40 ->skip($page * $pageSize)->take($pageSize)->get();
42 foreach ($images as $image) { 41 foreach ($images as $image) {
43 $image->thumbnail = $this->getThumbnail($image, 150, 150); 42 $image->thumbnail = $this->getThumbnail($image, 150, 150);
44 } 43 }
45 - $hasMore = count(DB::table('images')->orderBy('created_at', 'desc') 44 + $hasMore = $this->image->orderBy('created_at', 'desc')
46 - ->skip(($page + 1) * $pageSize)->take($pageSize)->get()) > 0; 45 + ->skip(($page + 1) * $pageSize)->take($pageSize)->count() > 0;
47 return response()->json([ 46 return response()->json([
48 'images' => $images, 47 'images' => $images,
49 'hasMore' => $hasMore 48 'hasMore' => $hasMore
...@@ -105,8 +104,8 @@ class ImageController extends Controller ...@@ -105,8 +104,8 @@ class ImageController extends Controller
105 // Create and save image object 104 // Create and save image object
106 $this->image->name = $name; 105 $this->image->name = $name;
107 $this->image->url = $imagePath . $storageName; 106 $this->image->url = $imagePath . $storageName;
108 - $this->image->created_by = Auth::user()->id; 107 + $this->image->created_by = auth()->user()->id;
109 - $this->image->updated_by = Auth::user()->id; 108 + $this->image->updated_by = auth()->user()->id;
110 $this->image->save(); 109 $this->image->save();
111 $this->image->thumbnail = $this->getThumbnail($this->image, 150, 150); 110 $this->image->thumbnail = $this->getThumbnail($this->image, 150, 150);
112 return response()->json($this->image); 111 return response()->json($this->image);
......
...@@ -9,11 +9,13 @@ module.exports = { ...@@ -9,11 +9,13 @@ module.exports = {
9 relative_urls: false, 9 relative_urls: false,
10 statusbar: false, 10 statusbar: false,
11 menubar: false, 11 menubar: false,
12 + paste_data_images: false,
12 //height: 700, 13 //height: 700,
13 extended_valid_elements: 'pre[*]', 14 extended_valid_elements: 'pre[*]',
15 + automatic_uploads: false,
14 valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]", 16 valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
15 plugins: "image table textcolor paste link imagetools fullscreen code hr", 17 plugins: "image table textcolor paste link imagetools fullscreen code hr",
16 - toolbar: "code undo | styleselect | hr bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fullscreen", 18 + toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link hr | code fullscreen",
17 content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}", 19 content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
18 style_formats: [ 20 style_formats: [
19 {title: "Header 1", format: "h1"}, 21 {title: "Header 1", format: "h1"},
...@@ -22,7 +24,8 @@ module.exports = { ...@@ -22,7 +24,8 @@ module.exports = {
22 {title: "Header 4", format: "h4"}, 24 {title: "Header 4", format: "h4"},
23 {title: "Paragraph", format: "p"}, 25 {title: "Paragraph", format: "p"},
24 {title: "Blockquote", format: "blockquote"}, 26 {title: "Blockquote", format: "blockquote"},
25 - {title: "Code Block", icon: "code", format: "pre"} 27 + {title: "Code Block", icon: "code", format: "pre"},
28 + {title: "Inline Code", icon: "code", inline: "code"}
26 ], 29 ],
27 file_browser_callback: function(field_name, url, type, win) { 30 file_browser_callback: function(field_name, url, type, win) {
28 ImageManager.show(function(image) { 31 ImageManager.show(function(image) {
...@@ -35,5 +38,60 @@ module.exports = { ...@@ -35,5 +38,60 @@ module.exports = {
35 win.document.getElementById(field_name).fireEvent("onchange"); 38 win.document.getElementById(field_name).fireEvent("onchange");
36 } 39 }
37 }); 40 });
41 + },
42 + paste_preprocess: function(plugin, args) {
43 + var content = args.content;
44 + if(content.indexOf('<img src="file://') !== -1) {
45 + args.content = '';
46 + }
47 + },
48 + setup: function(editor) {
49 + // Paste image-uploads
50 + editor.on('paste', function(e) {
51 + if(e.clipboardData) {
52 + var items = e.clipboardData.items;
53 + if (items){
54 + for (var i = 0; i < items.length; i++) {
55 + if (items[i].type.indexOf("image") !== -1) {
56 +
57 + var file = items[i].getAsFile();
58 + var formData = new FormData();
59 + var ext = 'png';
60 + var xhr = new XMLHttpRequest();
61 +
62 + if (file.name) {
63 + var fileNameMatches = file.name.match(/\.(.+)$/);
64 + if (fileNameMatches) {
65 + ext = fileNameMatches[1];
66 + }
67 + }
68 +
69 + var id = "image-" + Math.random().toString(16).slice(2);
70 + editor.execCommand('mceInsertContent', false, '<img src="/loading.gif" id="'+id+'">');
71 +
72 + var remoteFilename = "image-" + Date.now() + "." + ext;
73 + formData.append('file', file, remoteFilename);
74 + formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
75 +
76 + xhr.open('POST', '/upload/image');
77 + xhr.onload = function() {
78 + if (xhr.status === 200 || xhr.status === 201) {
79 + var result = JSON.parse(xhr.responseText);
80 + //var newImage = editor.getDoc().getElementById(id);
81 + //newImage.setAttribute('src', result.url);
82 + editor.dom.setAttrib(id, 'src', result.url);
83 + console.log(result);
84 + } else {
85 + console.log('An error occured uploading the image');
86 + console.log(xhr.responseText);
87 + }
88 + };
89 + xhr.send(formData);
90 + }
91 + }
92 + }
93 +
94 + }
95 + });
38 } 96 }
39 }; 97 };
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -16,4 +16,5 @@ ...@@ -16,4 +16,5 @@
16 @endif 16 @endif
17 </form> 17 </form>
18 </div> 18 </div>
19 + <image-manager></image-manager>
19 @stop 20 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -14,5 +14,6 @@ ...@@ -14,5 +14,6 @@
14 @include('pages/form', ['model' => $page]) 14 @include('pages/form', ['model' => $page])
15 </form> 15 </form>
16 </div> 16 </div>
17 + <image-manager></image-manager>
17 18
18 @stop 19 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -35,5 +35,3 @@ ...@@ -35,5 +35,3 @@
35 @endif 35 @endif
36 </div> 36 </div>
37 </div> 37 </div>
38 -
39 -<image-manager></image-manager>
...\ No newline at end of file ...\ No newline at end of file
......