کار با Froala در لاراول

با درود خدمت دوستان
مدتی هست که از Froala در پروژه ای لاراول خود استفاده میکنم و به طور کل میشه گفت کاربرد خوبی داشته در مقابل گزینه هایی مانند tinymce و غیره اما در بخش اپلود فایل ها برای حدف فایلی اپلود شده با مشکل روبه رو شدم ، پس تصمیم گرفتم که روش اپلود فایل و با دوستان عزیز به اشتراک بگذارم و در صورت امکان از کمک دوستان برای قسمت حذف فایل ها استفاده نمایم .
1- پس در ابتدا میتونید فایل Froala رو از لینک زیر دانلود کنید ، یا با روش های دیگر ارائه شده سایت وارد پروژه خود نمایید.
لینک دانلود

2- ایجاد Script و تنظیمات اولیه برای اعمال بر روی پروژه خود تون که بهتر هست در قسمت انتهای Body خود قرار دهید

<script>

    new FroalaEditor('.froala-editor', {
        language: 'fa',
        fontFamily: {
            "MjSayeh-2": 'sayeh',
            "MjCasablanca": 'MjCasablanca',
            "MjSudan": 'sudan',
            "Vazir": 'Vazir',
            'Dima Shekasteh':'Dima Shekasteh',
            "MjCordoba":'Mj Cordoba',
            "MjFaten":'Mj Faten',
            "Caveat-Regular":'Caveat-Regular',
            "JosefinSans-Regular":'JosefinSans-Regular',
            "LaBelleAurore":'LaBelleAurore',
            "QuesatLightDemo-Italic":'QuesatLight',
        },
        fontFamilyDefaultSelection: 'Vazir',
        fontFamilySelection: true,
        theme: 'gray',
        zIndex: 2001,
        imageStyles: {
            'uk-border-rounded': 'rounded',
            'uk-border-circle': 'circle',
            'uk-border-pill':'pill',
            'uk-box-shadow-small':'small shadow',
            'uk-box-shadow-medium':'medium shadow',
            'uk-box-shadow-large':'large shadow',
            'uk-box-shadow-xlarge':'xlarge shadow'
        },
        // Set custom buttons.
        toolbarButtons: {
            // Key represents the more button from the toolbar.
            moreText: {
                // List of buttons used in the  group.
                buttons: ['bold', 'italic', 'underline', 'align', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
                // Alignment of the group in the toolbar.
                align: 'left',
                // By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
                buttonsVisible: 4
            },

            moreParagraph: {
                buttons: [ 'formatOLSimple', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
                align: 'left',
                buttonsVisible: 3
            },

            moreRich: {
                buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters','embedly', 'insertFile', 'insertHR'],
                align: 'left',
                buttonsVisible: 3
            },

            moreMisc: {
                buttons: ['undo', 'redo','html', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll',  'help'],
                align: 'right',
                buttonsVisible: 4
            }
        },
        // Change buttons for XS screen.
        toolbarButtonsXS: {        // Key represents the more button from the toolbar.
            moreText: {
                // List of buttons used in the  group.
                buttons: ['align','bold', 'italic', 'underline',  'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
                // Alignment of the group in the toolbar.
                align: 'left',
                // By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
                buttonsVisible: 1
            },

            moreParagraph: {
                buttons: [ 'formatOLSimple', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
                align: 'left',
                buttonsVisible: 0
            },

            moreRich: {
                buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters','embedly', 'insertFile', 'insertHR'],
                align: 'left',
                buttonsVisible: 0
            },

            moreMisc: {
                buttons: ['undo', 'redo','html', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll',  'help'],
                align: 'right',
                buttonsVisible: 0
            }
        },

        // Set the file upload URL.
        imageUploadURL: '{{route('FroalaUpload')}}',
        imageUploadParam: 'image',
        videoUploadURL: '{{route('FroalaUpload')}}',
        videoUploadParam: 'video',
        fileUploadURL: '{{route('FroalaUpload')}}',

        // Set the image upload URL.
        imageManagerLoadURL: '{{route('FroalaUpload')}}',

        // Set the image delete URL.
        imageManagerDeleteURL: '{{route('FroalaDelete')}}',
        // Set the delete image request type.
        imageManagerDeleteMethod: "DELETE",
        imageManagerDeleteParams: {
            _token: "{{ csrf_token() }}"
        },

        //Set Parameters
        imageUploadParams: {
            _token:'{{csrf_token()}}'
        },

        videoUploadParams: {
            _token:'{{csrf_token()}}'
        },

        fileUploadParams: {
            _token:'{{csrf_token()}}'
        },

        imageManagerDeleteParams: {
            _token:'{{csrf_token()}}'
        },

    })

</script>

خوب همون طور که قابل مشاهده هست یک سری تغییرات سفارشی اعمال شد که بسته به نیاز خود قابل تغیر است.

3- ایجاد Route های مورد نیاز برای اعمال Upload File

/*Froala Editor Upload File Route*/
Route::post('/FroalaUpload','FroalaController@UploadURL')->name('FroalaUpload');
Route::delete('/FroalaDelete','FroalaController@DeleteURL')->name('FroalaDelete');

4- ویرایش قسمت Controller به صورت زیر

 public function UploadURL(Request $request)
    {
        if ($request->hasFile('image')) {
            $imagepath = $request->file('image')->store('editor/img', 'public');
            return ['link' => asset('storage').'/'.$imagepath];
        } else if ($request->hasFile('video')) {
            $videopath = $request->file('video')->store('editor/video', 'public');
            return ['link' => asset('storage').'/'.$videopath];
        } else {
            $filepath = $request->file('file')->store('editor/file', 'public');
            return ['link' => asset('storage').'/'.$filepath];
        }
    }

    public function DeleteURL(Request $request)
    {
        Storage::disk('public')->delete($request->input('src'));
    }

تا بدینجا و در فانگشن UploadURL شما قادر هستید انواع مختلط فایل از نوع تصویر ، ویدئو یا انواع فایل ها را اپلود کرده و مورد استفاده قرار دهید .
نکته : متاسفانه در قسمت حذف فایل هایی که درون Froala وارد شده دچار مشکل هستم و به وصیله فانگشن DeleteURL عمل میکنم که جواب مورد نظر که حذف شدن فایل اپلود شده از درون Storage میباشد را دریافت نمیکنم .
امید وار هستم تا اینجا قسمت های ارائه شده مورد استفاده دوستان عزیز قرار بگیرد و در صورت امکان با راه نمایی دوستان عزیز بتوانم به صورت کامل قسمت حذف رو هم ایجاد کنم

با تشکر حسین افتخارراد