hrace009's avatar

TinyMCE with Laravel 8

Hello,

I have integrate TinyMCE with Laravel 8 with following codes:

//Bottom Script:
<script>
        tinymce.init({
            selector: 'textarea.content',

            image_class_list: [
                {title: 'img-responsive', value: 'img-responsive'},
            ],
            height: 300,
            setup: function (editor) {
                editor.on('init change', function () {
                    editor.save();
                });
            },
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste imagetools"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ",

            image_title: true,
            automatic_uploads: true,
            images_upload_url: '{{ route('admin.uploadNews') }}',
            file_picker_types: 'image',
            file_picker_callback: function (cb, value, meta) {
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.onchange = function () {
                    var file = this.files[0];

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        var id = 'blobid' + (new Date()).getTime();
                        var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                        var base64 = reader.result.split(',')[1];
                        var blobInfo = blobCache.create(id, file, base64);
                        blobCache.add(blobInfo);
                        cb(blobInfo.blobUri(), {title: file.name});
                    };
                };
                input.click();
            }
        });
    </script>

Upload Controller:

    public function upload(Request $request): \Illuminate\Http\JsonResponse
    {
        $fileName = md5($request->file('file')->getClientOriginalName());
        $fileType = $request->file('file')->getClientOriginalExtension();
        $path = $request->file('file')->storeAs('uploads', $fileName . '.' . $fileType, 'public');
        return response()->json(['location' => url('/') . '/storage/' . $path]);
    }

when i try to upload the image, and i check to the code view on tyniMCE i got image path like this: src="../../storage/uploads/17b192bfcd4904cda8028038a3362f47.jpg" How i can make it using URL instead "../..." or like this src="https://localhost/storage/uploads/17b192bfcd4904cda8028038a3362f47.jpg"

0 likes
7 replies
hrace009's avatar

@kokoshneta yes i want an absolute path.

i try to change return type from public function upload(Request $request): \Illuminate\Http\JsonResponse to public function upload(Request $request): string i got an absolute path, but causing some problem when trying to upload image. it stuck with loading animation

kokoshneta's avatar

@hrace009 Changing the return type shouldn’t change the URL itself, which will always be a string.

What do you get if you dd() the call to url() before returning anything?

kokoshneta's avatar

@hrace009 I’ve never used TinyMCE, and I don’t really know anything about it, but that looks like something in the TinyMCE editor, not in your upload controller. It looks to me as if the URL that appears after uploading is correct, but then gets changed to the odd-looking relative path in the actual image source attribute when the uploaded file gets added into the MCE contents.

Are you sure it’s the upload controller that’s returning the wrong value, and not the TinyMCE script that’s doing something wrong with it?

hrace009's avatar

@kokoshneta hi, I have check it, and yes the problem not in controller, but it from java script

hrace009's avatar
hrace009
OP
Best Answer
Level 1

I have solve the problem, adding code bellow in tinyMCE.init solve everything

relative_urls: false,
remove_script_host: false,
document_base_url: '{{ config('app.url') }}',
1 like

Please or to participate in this conversation.