mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-11-23 03:12:32 +01:00
Integrated TinyMCE
This commit is contained in:
Dan Brown
parent
1ec9466c29
commit
d461861263
1
.gitignore
vendored
1
.gitignore
vendored
@ -6,4 +6,5 @@ Homestead.yaml
|
||||
.idea
|
||||
/public/plugins
|
||||
/public/css
|
||||
/public/bower
|
||||
/storage/images
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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 () {
|
||||
|
||||
@ -6,5 +6,8 @@ use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class Image extends Model
|
||||
{
|
||||
//
|
||||
public function getFilePath()
|
||||
{
|
||||
return storage_path() . $this->url;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
@extends('base')
|
||||
|
||||
@section('head')
|
||||
<link rel="stylesheet" href="/plugins/css/froala_editor.min.css">
|
||||
<link rel="stylesheet" href="/plugins/css/froala_style.min.css">
|
||||
<script src="/plugins/js/froala_editor.min.js"></script>
|
||||
<script src="/bower/tinymce-dist/tinymce.jquery.min.js"></script>
|
||||
<script src="/bower/dropzone/dist/min/dropzone.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({
|
||||
inlineMode: false,
|
||||
imageUploadURL: '/upload/image',
|
||||
imageUploadParams: {
|
||||
'_token': '{{ csrf_token() }}'
|
||||
//ImageManager.show('#image-manager');
|
||||
|
||||
tinymce.init({
|
||||
selector: '.edit-area textarea',
|
||||
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
|
||||
Loading…
Reference in New Issue
Block a user