အားလုံးမင်္ဂလာပါ အခု ကျွန်တော် React Laravel Coruse လုပ်နေရင်း
Ecommerce Admin Panel Tutorial လုပ်နေတုန်းမှာ
သင်နေရတာမလို့ tutorial လေးရေးချင်စိတ်ပေါက်လာတာနဲ့ ရေးလိုက်ရခြင်းပါ
:P
Summernote Rich Text Editor မှာ image ကို ရွေးလိုက်ရင်
image ကို base64 ပြောင်းပီး img tag မှာ ပြပေးပါတယ်
ဒီနည်းလမ်းနဲ့များ Database ထဲသိမ်းခဲ့ရင် database size ကတော်တော်လေးကြီးလာမှာဖြစ်ပီး
performace ကလည်းတော်တော်လေး weak လာမှာဖြစ်ပါတယ်
Server ကောင်းကောင်းဝယ်သုံးနိုင်သူတွေအတွက်တော့အကြုံးမဝင်ပါဘူး :P
အခုကျွန် တော်တို့ summernote က image ကို choose လိုက်ပီဆိုတာနဲ့
ပုံကို laravel ကို upload လုပ်ခိုင်းပါမယ်
laravel ကနေ image url ကို response လုပ်ပီး summernote မှာ ပုံကိုပြန်ပြပေးကြမယ်ပေါ့
အခု Tutorial အတွက် laravel version 9 (version 5 to 8 ထိသုံးနိုင်ပါတယ်။)
Bootstrap Version 4
Summernote Version 0.8
ကိုအသုံးပြုသွားပါမယ်။
အရင်ဆုံး welcome.blade.php မှာ အောက်က html strucuterရေးပါ
Bootstrap နဲ့ summernote cdn link များကိုသတိပြုပါ
<textarea id='description'></textarea>
မှာ summernote ကို run မှာဖြစ်ပါတယ်။
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Summernote Image Upload</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-bs4.min.css" rel="stylesheet"></head><body><textarea id="description"></textarea><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script>//jquery code here</script></body></html>
jquery Code Here comment မှာ code တချို့ဆက်ရေးသွားမှာဖြစ်ပါတယ်။
အောက်ကလို summernote() method ကိုခေါ်လိုက်တာနဲ့ summernote editor ထွက်လာမှာဖြစ်ပါတယ်။
//jquery code here$('#description').summernote();
Laravel web.php မှာ / route က welcome ကို render လုပ်ပါမယ်။
Route::get('/', function () {return view('welcome');});
browser မှာ run ကြည့်နိုင်ပါပီ။
Editor ထွက်လာတာကိုမြင်ရပါမယ်။
Summernote မှာ image choose လုပ်ပီးတဲ့ event တွေက
callback ထဲမှာရှိနေပါတယ်။
အောက်က code မှာ console မှာ file[0] ကိုထုတ်ထားပီး
js native image object ထွက်လာမှာဖြစ်ပါတယ် ဒါကို laravel ကိုပို့ပေးရင်ရပါပီ။
$('#description').summernote({callbacks:{onImageUpload:function(file){console.log(file[0]);}}});
image upload လုပ်ဖို့ web.php မှာ
/ route ကိုပဲ သွားလိုက်ပါမယ်။
laravel နဲ့ image ကို public directory ထဲထည့်ထားပီး
uploaded image path ကို return လုပ်ထားပေးပါမယ်။
Route::post('/', function () {if (request()->has('image')) {$file = request()->file('image');$name = uniqid() . $file->getClientOriginalName();$file->move(public_path('/images'), $name);return asset('images/' . $name);}});
Image ကို ရွေးပီးတဲ့အခါမှာ upload လုပ်ဖို့အတွက် jquery and js code နည်းနည်းရေးပါမယ်။
welcome.blade.php က script tag မှာရေးရမှာဖြစ်ပါတယ်။
<script>//jquery code here$('#description').summernote({callbacks:{onImageUpload:function(file){//laravel ကို form data ပို့ဖို့လိုအပ်ပါတ်။// post method မှာ csrf secutiry အတွက် token ပါထည့်ပေးဖို့လိုအပ်ပါတယ်။const frmData = new FormData();frmData.append('_token',"@php echo csrf_token(); @endphp")frmData.append('image',file[0]);// ajax နဲ့ post method နဲ့လှမ်းခေါ်ပါမယ်။$.ajax({url:'/',method:'POST',contentType:false,processData:false,data:frmData,success:function(data){// uploaded ဖြစ်တဲ့အခါ data မှာ laravel က response လာတဲ့ image path ရလာမှာဖြစ်ပါတယ်။$('#description').summernote('insertImage',data)//summernote editor ထဲကို ပုံကိုထည့်လိုက်ပါမယ်။ doc မှာအသေးစိတ်ဖတ်နိုင်ပါတယ်။}})}}});</script>
ဒါဆိုရင််upload user က ပုံရွေးပီးတဲ့အခါမှာ ပုံက server မှာ upload လုပ်သွားမှာဖြစ်ပီး
editor ထဲမှာလည်း ပုံဝင်လာမှာဖြစ်ပါတယ်။
ဆက်ရေးချင်ရင် image upload လုပ်နေတုန်း editor ကို disable လုပ်ထားသင့်ပီး
upload အောင်မြင်သွားမှ enable ပြန်လုပ်ထားသင့်ပါတယ်။
အောက်လိုပြင်ရေးလိုက်ပါမယ်
<script>//jquery code here$('#description').summernote({callbacks:{onImageUpload:function(file){//disable editor$('#description').summernote('disable')//laravel ကို form data ပို့ဖို့လိုအပ်ပါတ်။// post method မှာ csrf secutiry အတွက် token ပါထည့်ပေးဖို့လိုအပ်ပါတယ်။const frmData = new FormData();frmData.append('_token',"@php echo csrf_token(); @endphp")frmData.append('image',file[0]);// ajax နဲ့ post method နဲ့လှမ်းခေါ်ပါမယ်။$.ajax({url:'/',method:'POST',contentType:false,processData:false,data:frmData,success:function(data){// uploaded ဖြစ်တဲ့အခါ data မှာ laravel က response လာတဲ့ image path ရလာမှာဖြစ်ပါတယ်။$('#description').summernote('insertImage',data)//summernote editor ထဲကို ပုံကိုထည့်လိုက်ပါမယ်။ doc မှာအသေးစိတ်ဖတ်နိုင်ပါတယ်။//enable editor when image upload success$('#description').summernote('enable')}})}}});</script>
ဒါဆိုရင်အားလုံးအဆင်ပြေသွားပါပီ။
See U Next Lessons Guyz!