Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/petehouston/laravel-tinymce-simple-imageupload

Simple image upload for TinyMCE in Laravel.
https://github.com/petehouston/laravel-tinymce-simple-imageupload

hacktoberfest laravel laravel-tinymce tinymce tinymce-editor

Last synced: 6 days ago
JSON representation

Simple image upload for TinyMCE in Laravel.

Awesome Lists containing this project

README 

        
# laravel-tinymce-simple-imageupload



The simple image upload for TinyMCE in Laravel.



## Why made this?



Because, I use TinyMCE and basically, it is pretty hard to understand how to upload images directly to the editor while editing content. There are many TinyMCE image uploaders out there, but they are too complicated in functions, and I only need one core use-case, **pick up an image to upload**.



That's it, so I create this package for my projects to re-use. Well, if you want, you can use this too.



**This package works with Laravel 5.0+.**



## Installation



For Laravel 5.5+:



```

$ composer require "petehouston/laravel-tinymce-simple-imageupload:~1.3"

```



For Laravel before 5.5:



```

$ composer require "petehouston/laravel-tinymce-simple-imageupload:~1.1"

```



For laravel version 5.4 and older, you need to register the service provider in  `config/app.php`.



```

    'providers' => [

        ...



        Petehouston\Tinymce\TinymceServiceProvider::class,



    ]

```



## Usage



In the view that contain setup for TinyMCE, you need to include the upload view, add this line at the bottom,



```

@include('mceImageUpload::upload_form')

```



Don't worry, this form is hidden from your view, no-one will see it because it is `display: none`.



Next step is to add this config to the `tinymce` object,



```

    tinymce.init({

        // .. your config here

        relative_urls: false,

        file_browser_callback: function(field_name, url, type, win) {

            // trigger file upload form

            if (type == 'image') $('#formUpload input').click();

        }

    });

```



That's all, now you should be able to upload image directly to the editor while writing content.



**You can publish view in case you need to customize in `resources/views` directory**



```

$ php artisan vendor:publish --provider=Petehouston\Tinymce\TinymceServiceProvider

```



### Try example



There is a setup example in the package, you can try in your project by adding a sample route,



```

Route::get('/tinymce_example', function () {

    return view('mceImageUpload::example');

});

```



### Some notes



**The image upload handler**



I setup already a controller [`Petehouston\Tinymce\TinymceController`](https://github.com/petehouston/laravel-tinymce-simple-imageupload/blob/master/src/TinymceController.php) which implements a method for image uploading.



As you can see it will store all uploaded images in `public/img` directory, the name is like a concatenated hash,



```

$filename = 'image_'.time().'_'.$image->hashName();

```



The default route for handling image upload is `/tinymce/simple-image-upload`.



**Customize upload url and controller**



If you don't want to pre-config of the package, make yours.



While including the uploading form, pass in the url of handling post image upload



```

@include('mceImageUpload::upload_form', ['upload_url' => 'YOUR_URL_FOR_HANDLING_IMAGE_UPLOAD'])

```



Add a method for handling image upload that **should return the same result** as in [`Petehouston\Tinymce\TinymceController`](https://github.com/petehouston/laravel-tinymce-simple-imageupload/blob/master/src/TinymceController.php).