tinyMCE editor image issue solution code

 tinyMCE editor image upload issue solution:-

First you need to linkup cdn link with api key then follow  below code.

//web.php

Route::post('/upload-image-for-post', [PostController::class, 'uploadImg'])->name('upload-image-for-post');

//controller code

 public function uploadImg(Request $request)

    {

    

        $IMGfile = $request->file;

        $extenstion = $IMGfile->getClientOriginalExtension();

        $filename = time().'.'.$extenstion;

        $IMGfile->move('uploads/posts/', $filename);

        $baseUrl = url('/').'/uploads/posts/'.$filename;

        return response()->json([

            'location' => $baseUrl

        ]);    

    }

//blade file js code.

<script>

//For question description...

tinymce.init({

      selector: '#description',

      plugins: [

        "advlist autolink lists link image charmap print preview hr anchor pagebreak",

        "searchreplace wordcount visualblocks visualchars code fullscreen",

        "insertdatetime media nonbreaking save table contextmenu directionality",

        "emoticons template paste textcolor colorpicker textpattern textcolor"

      ],

      toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image | forecolor backcolor",

      images_upload_url: '/admin/upload-image-for-post',  // Server endpoint for image uploads

      images_upload_handler: function (blobInfo, success, failure) {

        const formData = new FormData();

        formData.append('file', blobInfo.blob(), blobInfo.filename());

        fetch('/admin/upload-image-for-post', {

          method: 'POST',

          body: formData,

          headers: {

            'X-CSRF-TOKEN': '{{ csrf_token() }}'  // Include the CSRF token

          }

        })

        .then(response => {

          if (!response.ok) {

            throw new Error('Network response was not ok');

          }

          return response.json();

        })

        .then(data => success(data.location))

        .catch(error => failure('Image upload failed: ' + error));

      }

});

</script>