Merge pull request #5164 from devansh-webkul/tinymce-upload-enhacment

TinyMCE Image Upload Enhancement #5008

packages/Webkul/Admin/src/Http/Controllers/Development/DashboardController.php

@@ -1,18 +0,0 @@
-<?php
-
-namespace Webkul\Admin\Http\Controllers\Development;
-
-use Webkul\Admin\Http\Controllers\Controller;
-
-class DashboardController extends Controller
-{
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\View\View
-     */
-    public function index()
-    {
-        return view('admin::settings.development.dashboard');
-    }
-}

packages/Webkul/Admin/src/Http/Controllers/TinyMCEController.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace Webkul\Admin\Http\Controllers;
+
+use Illuminate\Support\Facades\Storage;
+
+class TinyMCEController extends Controller
+{
+    /**
+     * Storage folder path.
+     *
+     * @var string
+     */
+    private $storagePath = 'tinymce';
+
+    /**
+     * Upload file from tinymce.
+     *
+     * @return void
+     */
+    public function upload()
+    {
+        $media = $this->storeMedia();
+
+        if (! empty($media)) {
+            return response()->json([
+                'location' => $media['file_url']
+            ]);
+        }
+
+        return response()->json([]);
+    }
+
+    /**
+     * Store media.
+     *
+     * @return array
+     */
+    public function storeMedia()
+    {
+        if (request()->hasFile('file')) {
+            return [
+                'file'      => $path = request()->file('file')->store($this->storagePath),
+                'file_name' => request()->file('file')->getClientOriginalName(),
+                'file_url'  => Storage::url($path),
+            ];
+        }
+
+        return [];
+    }
+}

packages/Webkul/Admin/src/Http/routes.php

@@ -38,6 +38,12 @@ Route::group(['middleware' => ['web', 'admin_locale']], function () {
                 'redirect' => 'admin.session.create',
             ])->name('admin.session.destroy');
 
+            /**
+             * Tinymce file upload handler.
+             */
+            Route::post('tinymce/upload', 'Webkul\Admin\Http\Controllers\TinyMCEController@upload')
+                ->name('admin.tinymce.upload');
+
             // Dashboard Route
             Route::get('dashboard', 'Webkul\Admin\Http\Controllers\DashboardController@index')->defaults('_config', [
                 'view' => 'admin::dashboard.index',

packages/Webkul/Admin/src/Resources/assets/sass/_variables.scss

@@ -9,7 +9,7 @@ $accordian-header: #fbfbfb;
 // Buttons
 $btn-primary: $white;
 $btn-primary-bg: #0041FF;
-$btn-danger-bg: $red;
+$btn-danger-bg: red;
 
 // Cards
 $card-title: #a2a2a2;

packages/Webkul/Admin/src/Resources/lang/ar/app.php

@@ -1275,6 +1275,12 @@ return [
             'title' => 'خطأ غير مصرح به',
             'message' => 'ولم يطبق الطلب لأنه يفتقر إلى وثائق إثبات صحيحة للمورد المستهدف.'
         ],
+
+        'tinymce' => [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
 
     'export' => [

packages/Webkul/Admin/src/Resources/lang/de/app.php

@@ -1280,6 +1280,13 @@ return [
             'title'      => 'Unauthorisiert',
             'message'    => 'Die Anforderung wurde nicht angewendet, da keine gültigen Authentifizierungsdaten für die Zielressource vorhanden sind.',
         ],
+
+        'tinymce'       =>
+        [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
     'export'        =>
     [

packages/Webkul/Admin/src/Resources/lang/en/app.php

@@ -1291,6 +1291,12 @@ return [
             'title'      => 'Unauthorized Error',
             'message'    => 'The request has not been applied because it lacks valid authentication credentials for the target resource.'
         ],
+
+        'tinymce' => [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
 
     'export' => [

packages/Webkul/Admin/src/Resources/lang/es/app.php

@@ -1284,6 +1284,12 @@ return [
             'title' => 'No autorizado',
             'message' => 'La solicitud no se ha aplicado porque carece de credenciales de autenticación válidas para el recurso de destino.'
         ],
+
+        'tinymce' => [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
 
     'export' => [

packages/Webkul/Admin/src/Resources/lang/fa/app.php

@@ -1275,6 +1275,12 @@ return [
             'title' => 'خطای غیرمجاز',
             'message' => 'درخواست اعمال نشده است زیرا فاقد اعتبار تأیید معتبر برای منبع مورد نظر است.'
         ],
+
+        'tinymce' => [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
 
     'export' => [

packages/Webkul/Admin/src/Resources/lang/fr/app.php

@@ -1298,6 +1298,12 @@ return [
             'title' => 'Erreur non autorisée',
             'message' => 'La demande n\'a pas été appliquée car il manque des informations d\'authentification valides pour la ressource cible.',
         ],
+
+        'tinymce' => [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
 
     'export' => [

packages/Webkul/Admin/src/Resources/lang/it/app.php

@@ -1278,6 +1278,12 @@ return [
             'title' => 'Errore non autorizzato',
             'message' => 'La richiesta non è stata applicata perchè manca di una valida autenticazione per accedere alla risorsa.'
         ],
+
+        'tinymce' => [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
 
     'export' => [

packages/Webkul/Admin/src/Resources/lang/nl/app.php

@@ -1272,6 +1272,12 @@ return [
             'title' => 'Ongeautoriseerde fout',
             'message' => 'Het verzoek is niet toegepast omdat het geen geldige verificatiereferenties heeft voor de doelresource.'
         ],
+
+        'tinymce' => [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
 
     'export' => [

packages/Webkul/Admin/src/Resources/lang/pl/app.php

@@ -1275,6 +1275,12 @@ return [
             'title' => ' NIEAUTORYZOWANY DOSTĘP',
             'message' => 'Żądanie nie zostało zastosowane, ponieważ brakuje prawidłowych poświadczeń uwierzytelnienia dla zasobu docelowego.'
         ],
+
+        'tinymce' => [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
 
     'export' => [

packages/Webkul/Admin/src/Resources/lang/pt_BR/app.php

@@ -1274,6 +1274,12 @@ return [
             'title' => 'Erro não Autorizado',
             'message' => 'A solicitação não foi aplicada porque não possui credenciais de autenticação válidas para o recurso de destino.'
         ],
+
+        'tinymce' => [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
 
     'export' => [

packages/Webkul/Admin/src/Resources/lang/tr/app.php

@@ -1262,6 +1262,12 @@ return [
             'title' => 'Yetkisiz Erişim',
             'message' => 'Erişmek istediğiniz sayfa için özel yetki gerekiyor!'
         ],
+
+        'tinymce' => [
+            'http-error'    => 'HTTP error.',
+            'invalid-json'  => 'Invalid JSON.',
+            'upload-failed' => 'Image upload failed due to a XHR Transport error.'
+        ],
     ],
 
     'export' => [

packages/Webkul/Admin/src/Resources/views/catalog/categories/create.blade.php

@@ -6,9 +6,7 @@
 
 @section('content')
     <div class="content">
-
         <form method="POST" action="{{ route('admin.catalog.categories.store') }}" @submit.prevent="onSubmit" enctype="multipart/form-data">
-
             <div class="page-header">
                 <div class="page-title">
                     <h1>
@@ -28,13 +26,13 @@
             <div class="page-content">
                 <div class="form-container">
                     @csrf()
+
                     <input type="hidden" name="locale" value="all"/>
 
                     {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.general.before') !!}
 
                     <accordian :title="'{{ __('admin::app.catalog.categories.general') }}'" :active="true">
                         <div slot="body">
-
                             {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.general.controls.before') !!}
 
                             <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
@@ -63,18 +61,15 @@
                             </div>
 
                             {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.general.controls.after') !!}
-
                         </div>
                     </accordian>
 
                     {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.general.after') !!}
 
-
                     {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.description_images.before') !!}
 
                     <accordian :title="'{{ __('admin::app.catalog.categories.description-and-images') }}'" :active="true">
                         <div slot="body">
-
                             {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.description_images.controls.before') !!}
 
                             <div class="control-group" :class="[errors.has('display_mode') ? 'has-error' : '']">
@@ -105,19 +100,15 @@
                                         @php echo str_replace($key, 'Image', $message[0]); @endphp
                                     @endforeach
                                 </span>
-
                             </div>
 
                             {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.description_images.controls.after') !!}
-
                         </div>
                     </accordian>
 
                     {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.description_images.after') !!}
 
-
                     @if ($categories->count())
-
                         {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.parent_category.before') !!}
 
                         <accordian :title="'{{ __('admin::app.catalog.categories.parent-category') }}'" :active="true">
@@ -133,12 +124,10 @@
                         </accordian>
 
                         {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.parent_category.after') !!}
-
                     @endif
 
                     <accordian :title="'{{ __('admin::app.catalog.categories.filterable-attributes') }}'" :active="true">
                         <div slot="body">
-
                             <?php $selectedaAtributes = old('attributes') ? old('attributes') : ['11']  ?>
 
                             <div class="control-group" :class="[errors.has('attributes[]') ? 'has-error' : '']">
@@ -163,7 +152,6 @@
 
                     <accordian :title="'{{ __('admin::app.catalog.categories.seo') }}'" :active="true">
                         <div slot="body">
-
                             {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.seo.controls.before') !!}
 
                             <div class="control-group">
@@ -188,46 +176,29 @@
                             </div>
 
                             {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.seo.controls.after') !!}
-
                         </div>
                     </accordian>
 
                     {!! view_render_event('bagisto.admin.catalog.category.create_form_accordian.seo.after') !!}
-
                 </div>
             </div>
-
         </form>
     </div>
 @stop
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script type="text/x-template" id="description-template">
-
         <div class="control-group" :class="[errors.has('description') ? 'has-error' : '']">
             <label for="description" :class="isRequired ? 'required' : ''">{{ __('admin::app.catalog.categories.description') }}</label>
             <textarea v-validate="isRequired ? 'required' : ''"  class="control" id="description" name="description" data-vv-as="&quot;{{ __('admin::app.catalog.categories.description') }}&quot;">{{ old('description') }}</textarea>
             <span class="control-error" v-if="errors.has('description')">@{{ errors.first('description') }}</span>
         </div>
-
     </script>
 
     <script>
-        $(document).ready(function () {
-            tinymce.init({
-                selector: 'textarea#description',
-                height: 200,
-                width: "100%",
-                plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
-                toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor link hr | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent  | removeformat | code | table',
-                image_advtab: true
-            });
-        });
-
         Vue.component('description', {
-
             template: '#description-template',
 
             inject: ['$validator'],
@@ -239,18 +210,28 @@
             },
 
             created: function () {
-                var this_this = this;
+                let self = this;
 
                 $(document).ready(function () {
                     $('#display_mode').on('change', function (e) {
                         if ($('#display_mode').val() != 'products_only') {
-                            this_this.isRequired = true;
+                            self.isRequired = true;
                         } else {
-                            this_this.isRequired = false;
+                            self.isRequired = false;
                         }
-                    })
+                    });
+
+                    tinyMCEHelper.initTinyMCE({
+                        selector: 'textarea#description',
+                        height: 200,
+                        width: "100%",
+                        plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
+                        toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor link hr | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent  | removeformat | code | table',
+                        uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                        csrfToken: '{{ csrf_token() }}',
+                    });
                 });
-            }
+            },
-        })
+        });
     </script>
 @endpush

packages/Webkul/Admin/src/Resources/views/catalog/categories/edit.blade.php

@@ -11,7 +11,6 @@
         @endphp
 
         <form method="POST" action="" @submit.prevent="onSubmit" enctype="multipart/form-data">
-
             <div class="page-header">
                 <div class="page-title">
                     <h1>
@@ -43,13 +42,13 @@
             <div class="page-content">
                 <div class="form-container">
                     @csrf()
+
                     <input name="_method" type="hidden" value="PUT">
 
                     {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.general.before', ['category' => $category]) !!}
 
                     <accordian :title="'{{ __('admin::app.catalog.categories.general') }}'" :active="true">
                         <div slot="body">
-
                             {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.general.controls.before', ['category' => $category]) !!}
 
                             <div class="control-group" :class="[errors.has('{{$locale}}[name]') ? 'has-error' : '']">
@@ -80,18 +79,15 @@
                             </div>
 
                             {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.general.controls.after', ['category' => $category]) !!}
-
                         </div>
                     </accordian>
 
                     {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.general.after', ['category' => $category]) !!}
 
-
                     {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.description_images.before', ['category' => $category]) !!}
 
                     <accordian :title="'{{ __('admin::app.catalog.categories.description-and-images') }}'" :active="true">
                         <div slot="body">
-
                             {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.description_images.controls.before', ['category' => $category]) !!}
 
                             <div class="control-group" :class="[errors.has('display_mode') ? 'has-error' : '']">
@@ -122,18 +118,15 @@
                                         @php echo str_replace($key, 'Image', $message[0]); @endphp
                                     @endforeach
                                 </span>
-
                             </div>
 
                             {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.description_images.controls.after', ['category' => $category]) !!}
-
                         </div>
                     </accordian>
 
                     {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.description_images.after', ['category' => $category]) !!}
 
                     @if ($categories->count())
-
                         {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.parent_category.before', ['category' => $category]) !!}
 
                         <accordian :title="'{{ __('admin::app.catalog.categories.parent-category') }}'" :active="true">
@@ -149,12 +142,10 @@
                         </accordian>
 
                         {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.parent_category.after', ['category' => $category]) !!}
-
                     @endif
 
                     <accordian :title="'{{ __('admin::app.catalog.categories.filterable-attributes') }}'" :active="true">
                         <div slot="body">
-
                             <?php $selectedaAtributes = old('attributes') ?? $category->filterableAttributes->pluck('id')->toArray() ?>
 
                             <div class="control-group" :class="[errors.has('attributes[]') ? 'has-error' : '']">
@@ -179,7 +170,6 @@
 
                     <accordian :title="'{{ __('admin::app.catalog.categories.seo') }}'" :active="true">
                         <div slot="body">
-
                             {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.seo.controls.before', ['category' => $category]) !!}
 
                             <div class="control-group">
@@ -212,24 +202,20 @@
                             </div>
 
                             {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.seo.controls.after', ['category' => $category]) !!}
-
                         </div>
                     </accordian>
 
                     {!! view_render_event('bagisto.admin.catalog.category.edit_form_accordian.seo.after', ['category' => $category]) !!}
-
                 </div>
             </div>
-
         </form>
     </div>
 @stop
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script type="text/x-template" id="description-template">
-
         <div class="control-group" :class="[errors.has('{{$locale}}[description]') ? 'has-error' : '']">
             <label for="description" :class="isRequired ? 'required' : ''">{{ __('admin::app.catalog.categories.description') }}
                 <span class="locale">[{{ $locale }}]</span>
@@ -237,23 +223,10 @@
             <textarea v-validate="isRequired ? 'required' : ''" class="control" id="description" name="{{$locale}}[description]" data-vv-as="&quot;{{ __('admin::app.catalog.categories.description') }}&quot;">{{ old($locale)['description'] ?? ($category->translate($locale)['description'] ?? '') }}</textarea>
             <span class="control-error" v-if="errors.has('{{$locale}}[description]')">@{{ errors.first('{!!$locale!!}[description]') }}</span>
         </div>
-
     </script>
 
     <script>
-        $(document).ready(function () {
-            tinymce.init({
-                selector: 'textarea#description',
-                height: 200,
-                width: "100%",
-                plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
-                toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor link hr | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent  | removeformat | code | table',
-                image_advtab: true
-            });
-        });
-
         Vue.component('description', {
-
             template: '#description-template',
 
             inject: ['$validator'],
@@ -265,24 +238,34 @@
             },
 
             created: function () {
-                var this_this = this;
+                let self = this;
 
                 $(document).ready(function () {
                     $('#display_mode').on('change', function (e) {
                         if ($('#display_mode').val() != 'products_only') {
-                            this_this.isRequired = true;
+                            self.isRequired = true;
                         } else {
-                            this_this.isRequired = false;
+                            self.isRequired = false;
                         }
                     })
 
                     if ($('#display_mode').val() != 'products_only') {
-                        this_this.isRequired = true;
+                        self.isRequired = true;
                     } else {
-                        this_this.isRequired = false;
+                        self.isRequired = false;
                     }
+
+                    tinyMCEHelper.initTinyMCE({
+                        selector: 'textarea#description',
+                        height: 200,
+                        width: "100%",
+                        plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
+                        toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor link hr | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent  | removeformat | code | table',
+                        uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                        csrfToken: '{{ csrf_token() }}',
+                    });
                 });
             }
-        })
+        });
     </script>
 @endpush

packages/Webkul/Admin/src/Resources/views/catalog/products/edit.blade.php

@@ -196,7 +196,7 @@
 @stop
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script>
         $(document).ready(function () {
@@ -212,15 +212,17 @@
                 var query = '?channel=' + $('#channel-switcher').val() + '&locale=' + $('#locale-switcher').val();
 
                 window.location.href = "{{ route('admin.catalog.products.edit', $product->id)  }}" + query;
-            })
+            });
 
-            tinymce.init({
+            tinyMCEHelper.initTinyMCE({
                 selector: 'textarea#description, textarea#short_description',
                 height: 200,
                 width: "100%",
                 plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
                 toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor link hr | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent  | removeformat | code | table',
-                image_advtab: true
+                image_advtab: true,
+                uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                csrfToken: '{{ csrf_token() }}',
             });
         });
     </script>

packages/Webkul/Admin/src/Resources/views/cms/create.blade.php

@@ -109,18 +109,20 @@
 @stop
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script>
         $(document).ready(function () {
-            tinymce.init({
+            tinyMCEHelper.initTinyMCE({
                 selector: 'textarea#content',
                 height: 200,
                 width: "100%",
                 plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
                 toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor alignleft aligncenter alignright alignjustify | link hr |numlist bullist outdent indent  | removeformat | code | table',
                 image_advtab: true,
-                valid_elements : '*[*]'
+                valid_elements : '*[*]',
+                uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                csrfToken: '{{ csrf_token() }}',
             });
         });
     </script>

packages/Webkul/Admin/src/Resources/views/cms/edit.blade.php

@@ -124,18 +124,20 @@
 @stop
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script>
         $(document).ready(function () {
-            tinymce.init({
+            tinyMCEHelper.initTinyMCE({
                 selector: 'textarea#content',
                 height: 200,
                 width: "100%",
                 plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
                 toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor alignleft aligncenter alignright alignjustify | link hr | numlist bullist outdent indent  | removeformat | code | table',
                 image_advtab: true,
-                valid_elements : '*[*]'
+                valid_elements : '*[*]',
+                uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                csrfToken: '{{ csrf_token() }}',
             });
         });
     </script>

packages/Webkul/Admin/src/Resources/views/layouts/tinymce.blade.php

@@ -0,0 +1,90 @@
+<script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+
+<script>
+    let tinyMCEHelper = {
+        initTinyMCE: function (config) {
+            let self = this;
+
+            tinymce.init({
+                ...config,
+
+                file_picker_callback: function(cb, value, meta) {
+                    self.filePickerCallback(config, cb, value, meta);
+                },
+
+                images_upload_handler: function (blobInfo, success, failure, progress) {
+                    self.uploadImageHandler(config, blobInfo, success, failure, progress);
+                },
+            });
+        },
+
+        filePickerCallback: function(config, cb, value, meta) {
+            let input = document.createElement('input');
+            input.setAttribute('type', 'file');
+            input.setAttribute('accept', 'image/*');
+
+            input.onchange = function() {
+                let file = this.files[0];
+
+                let reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = function () {
+                    let id = 'blobid' + (new Date()).getTime();
+                    let blobCache =  tinymce.activeEditor.editorUpload.blobCache;
+                    let base64 = reader.result.split(',')[1];
+                    let blobInfo = blobCache.create(id, file, base64);
+                    blobCache.add(blobInfo);
+                    cb(blobInfo.blobUri(), {title: file.name});
+                };
+            };
+            input.click();
+        },
+
+        uploadImageHandler: function(config, blobInfo, success, failure, progress) {
+            let xhr, formData;
+
+            xhr = new XMLHttpRequest();
+
+            xhr.withCredentials = false;
+
+            xhr.open('POST', config.uploadRoute);
+
+            xhr.upload.onprogress = function (e) {
+                progress(e.loaded / e.total * 100);
+            };
+
+            xhr.onload = function() {
+                let json;
+
+                if (xhr.status === 403) {
+                    failure('{{ __('admin::app.error.tinymce.http-error') }}', { remove: true });
+                    return;
+                }
+
+                if (xhr.status < 200 || xhr.status >= 300) {
+                    failure('{{ __('admin::app.error.tinymce.http-error') }}');
+                    return;
+                }
+
+                json = JSON.parse(xhr.responseText);
+
+                if (! json || typeof json.location != 'string') {
+                    failure('{{ __('admin::app.error.tinymce.invalid-json') }} ' + xhr.responseText);
+                    return;
+                }
+
+                success(json.location);
+            };
+
+            xhr.onerror = function () {
+                failure('{{ __('admin::app.error.tinymce.upload-failed') }}');
+            };
+
+            formData = new FormData();
+            formData.append('_token', config.csrfToken);
+            formData.append('file', blobInfo.blob(), blobInfo.filename());
+
+            xhr.send(formData);
+        }
+    };
+</script>

packages/Webkul/Admin/src/Resources/views/marketing/email-marketing/templates/create.blade.php

@@ -71,17 +71,19 @@
 @stop
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script>
         $(document).ready(function () {
-            tinymce.init({
+            tinyMCEHelper.initTinyMCE({
                 selector: 'textarea#content',
                 height: 200,
                 width: "100%",
                 plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
                 toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor link hr | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent  | removeformat | code | table',
-                image_advtab: true
+                image_advtab: true,
+                uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                csrfToken: '{{ csrf_token() }}',
             });
         });
     </script>

packages/Webkul/Admin/src/Resources/views/marketing/email-marketing/templates/edit.blade.php

@@ -72,17 +72,19 @@
 @stop
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script>
         $(document).ready(function () {
-            tinymce.init({
+            tinyMCEHelper.initTinyMCE({
                 selector: 'textarea#content',
                 height: 200,
                 width: "100%",
                 plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
                 toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor link hr | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent  | removeformat | code | table',
-                image_advtab: true
+                image_advtab: true,
+                uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                csrfToken: '{{ csrf_token() }}',
             });
         });
     </script>

packages/Webkul/Admin/src/Resources/views/settings/channels/create.blade.php

@@ -238,18 +238,20 @@
 @stop
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script>
         $(document).ready(function () {
-            tinymce.init({
+            tinyMCEHelper.initTinyMCE({
                 selector: 'textarea#home_page_content,textarea#footer_content',
                 height: 200,
                 width: "100%",
                 plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
                 toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor link hr | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat | code | table',
                 image_advtab: true,
-                valid_elements : '*[*]'
+                valid_elements : '*[*]',
+                uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                csrfToken: '{{ csrf_token() }}',
             });
         });
     </script>

packages/Webkul/Admin/src/Resources/views/settings/channels/edit.blade.php

@@ -294,18 +294,20 @@
 @stop
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script>
         $(document).ready(function () {
-            tinymce.init({
+            tinyMCEHelper.initTinyMCE({
                 selector: 'textarea#home_page_content,textarea#footer_content',
                 height: 200,
                 width: "100%",
                 plugins: 'image imagetools media wordcount save fullscreen code table lists link hr',
                 toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor link hr | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat | code | table',
                 image_advtab: true,
-                valid_elements : '*[*]'
+                valid_elements : '*[*]',
+                uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                csrfToken: '{{ csrf_token() }}',
             });
         });
     </script>

packages/Webkul/Admin/src/Resources/views/settings/development/dashboard.blade.php

@@ -1,19 +0,0 @@
-@extends('admin::layouts.content')
-
-@section('page_title')
-    {{ __('admin::app.settings.development.title') }}
-@stop
-
-@section('content')
-    <div class="content">
-        <div class="page-header">
-            <div class="page-title">
-                <h1>{{ __('admin::app.settings.development.title') }}</h1>
-            </div>
-        </div>
-
-        <div class="page-content">
-
-        </div>
-    </div>
-@stop

packages/Webkul/Admin/src/Resources/views/settings/sliders/create.blade.php

@@ -109,11 +109,11 @@
 @endsection
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script>
         $(document).ready(function () {
-            tinymce.init({
+            tinyMCEHelper.initTinyMCE({
                 selector: 'textarea#tiny',
                 height: 200,
                 width: "100%",
@@ -124,6 +124,8 @@
                     { title: 'Test template 1', content: 'Test 1' },
                     { title: 'Test template 2', content: 'Test 2' }
                 ],
+                uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                csrfToken: '{{ csrf_token() }}',
             });
         });
     </script>

packages/Webkul/Admin/src/Resources/views/settings/sliders/edit.blade.php

@@ -114,11 +114,11 @@
 @endsection
 
 @push('scripts')
-    <script src="{{ asset('vendor/webkul/admin/assets/js/tinyMCE/tinymce.min.js') }}"></script>
+    @include('admin::layouts.tinymce')
 
     <script>
         $(document).ready(function () {
-            tinymce.init({
+            tinyMCEHelper.initTinyMCE({
                 selector: 'textarea#tiny',
                 height: 200,
                 width: "100%",
@@ -129,6 +129,8 @@
                     { title: 'Test template 1', content: 'Test 1' },
                     { title: 'Test template 2', content: 'Test 2' }
                 ],
+                uploadRoute: '{{ route('admin.tinymce.upload') }}',
+                csrfToken: '{{ csrf_token() }}',
             });
         });
     </script>