In this tutorial you learn
1. Front end code for laravel tinymce
2. Controller code and route
3. Things to remember when you upload image using tinymce
1. Front end code for laravel TinyMCE
<script src="https://cdn.tiny.cloud/1/nnd7pakaxqr7isf3oqefsdlew1jsidgl78umfeus6tg21ng0/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea',
image_class_list: [
{title: 'img-responsive', value: 'img-responsive'},
],
height: 500,
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: '/upload',
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>
2. Controller code and route
Controller code
public function upload(Request $request){
$fileName=$request->file('file')->getClientOriginalName();
$path=$request->file('file')->storeAs('uploads', $fileName, 'public');
return response()->json(['location'=>"/storage/$path"]);
/*$imgpath = request()->file('file')->store('uploads', 'public');
return response()->json(['location' => "/storage/$imgpath"]);*/
}
Route code
Route::post('/upload', 'PostTasksController@upload');
3. Things to remember when you upload image using TinyMCE
php artisan storage:link