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"