با درود خدمت دوستان
مدتی هست که از Froala در پروژه ای لاراول خود استفاده میکنم و به طور کل میشه گفت کاربرد خوبی داشته در مقابل گزینه هایی مانند tinymce و غیره اما در بخش اپلود فایل ها برای حدف فایلی اپلود شده با مشکل روبه رو شدم ، پس تصمیم گرفتم که روش اپلود فایل و با دوستان عزیز به اشتراک بگذارم و در صورت امکان از کمک دوستان برای قسمت حذف فایل ها استفاده نمایم .
1- پس در ابتدا میتونید فایل Froala رو از لینک زیر دانلود کنید ، یا با روش های دیگر ارائه شده سایت وارد پروژه خود نمایید.
لینک دانلود
2- ایجاد Script و تنظیمات اولیه برای اعمال بر روی پروژه خود تون که بهتر هست در قسمت انتهای Body خود قرار دهید
<script>
new FroalaEditor('.froala-editor', {
language: 'fa',
fontFamily: {
"MjSayeh-2": 'sayeh',
"MjCasablanca": 'MjCasablanca',
"MjSudan": 'sudan',
"Vazir": 'Vazir',
'Dima Shekasteh':'Dima Shekasteh',
"MjCordoba":'Mj Cordoba',
"MjFaten":'Mj Faten',
"Caveat-Regular":'Caveat-Regular',
"JosefinSans-Regular":'JosefinSans-Regular',
"LaBelleAurore":'LaBelleAurore',
"QuesatLightDemo-Italic":'QuesatLight',
},
fontFamilyDefaultSelection: 'Vazir',
fontFamilySelection: true,
theme: 'gray',
zIndex: 2001,
imageStyles: {
'uk-border-rounded': 'rounded',
'uk-border-circle': 'circle',
'uk-border-pill':'pill',
'uk-box-shadow-small':'small shadow',
'uk-box-shadow-medium':'medium shadow',
'uk-box-shadow-large':'large shadow',
'uk-box-shadow-xlarge':'xlarge shadow'
},
// Set custom buttons.
toolbarButtons: {
// Key represents the more button from the toolbar.
moreText: {
// List of buttons used in the group.
buttons: ['bold', 'italic', 'underline', 'align', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
// Alignment of the group in the toolbar.
align: 'left',
// By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
buttonsVisible: 4
},
moreParagraph: {
buttons: [ 'formatOLSimple', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
align: 'left',
buttonsVisible: 3
},
moreRich: {
buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters','embedly', 'insertFile', 'insertHR'],
align: 'left',
buttonsVisible: 3
},
moreMisc: {
buttons: ['undo', 'redo','html', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'help'],
align: 'right',
buttonsVisible: 4
}
},
// Change buttons for XS screen.
toolbarButtonsXS: { // Key represents the more button from the toolbar.
moreText: {
// List of buttons used in the group.
buttons: ['align','bold', 'italic', 'underline', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
// Alignment of the group in the toolbar.
align: 'left',
// By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
buttonsVisible: 1
},
moreParagraph: {
buttons: [ 'formatOLSimple', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
align: 'left',
buttonsVisible: 0
},
moreRich: {
buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters','embedly', 'insertFile', 'insertHR'],
align: 'left',
buttonsVisible: 0
},
moreMisc: {
buttons: ['undo', 'redo','html', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'help'],
align: 'right',
buttonsVisible: 0
}
},
// Set the file upload URL.
imageUploadURL: '{{route('FroalaUpload')}}',
imageUploadParam: 'image',
videoUploadURL: '{{route('FroalaUpload')}}',
videoUploadParam: 'video',
fileUploadURL: '{{route('FroalaUpload')}}',
// Set the image upload URL.
imageManagerLoadURL: '{{route('FroalaUpload')}}',
// Set the image delete URL.
imageManagerDeleteURL: '{{route('FroalaDelete')}}',
// Set the delete image request type.
imageManagerDeleteMethod: "DELETE",
imageManagerDeleteParams: {
_token: "{{ csrf_token() }}"
},
//Set Parameters
imageUploadParams: {
_token:'{{csrf_token()}}'
},
videoUploadParams: {
_token:'{{csrf_token()}}'
},
fileUploadParams: {
_token:'{{csrf_token()}}'
},
imageManagerDeleteParams: {
_token:'{{csrf_token()}}'
},
})
</script>
خوب همون طور که قابل مشاهده هست یک سری تغییرات سفارشی اعمال شد که بسته به نیاز خود قابل تغیر است.
3- ایجاد Route های مورد نیاز برای اعمال Upload File
/*Froala Editor Upload File Route*/
Route::post('/FroalaUpload','FroalaController@UploadURL')->name('FroalaUpload');
Route::delete('/FroalaDelete','FroalaController@DeleteURL')->name('FroalaDelete');
4- ویرایش قسمت Controller به صورت زیر
public function UploadURL(Request $request)
{
if ($request->hasFile('image')) {
$imagepath = $request->file('image')->store('editor/img', 'public');
return ['link' => asset('storage').'/'.$imagepath];
} else if ($request->hasFile('video')) {
$videopath = $request->file('video')->store('editor/video', 'public');
return ['link' => asset('storage').'/'.$videopath];
} else {
$filepath = $request->file('file')->store('editor/file', 'public');
return ['link' => asset('storage').'/'.$filepath];
}
}
public function DeleteURL(Request $request)
{
Storage::disk('public')->delete($request->input('src'));
}
تا بدینجا و در فانگشن UploadURL شما قادر هستید انواع مختلط فایل از نوع تصویر ، ویدئو یا انواع فایل ها را اپلود کرده و مورد استفاده قرار دهید .
نکته : متاسفانه در قسمت حذف فایل هایی که درون Froala وارد شده دچار مشکل هستم و به وصیله فانگشن DeleteURL عمل میکنم که جواب مورد نظر که حذف شدن فایل اپلود شده از درون Storage میباشد را دریافت نمیکنم .
امید وار هستم تا اینجا قسمت های ارائه شده مورد استفاده دوستان عزیز قرار بگیرد و در صورت امکان با راه نمایی دوستان عزیز بتوانم به صورت کامل قسمت حذف رو هم ایجاد کنم
با تشکر حسین افتخارراد
من مدتی از این ادیتور استفاده کردم ، اما مشکلاتی داشت
مثل اینکه بعد از چند دقیق کار با ادیتور ، ناگهان حذف میشد. و از طرفی داخل دیوایس ها کوچک خوب نمایش داده نمی شد.
من بعد از کلی summernote (اگر درست نوشته باشم ) انتخاب کردم چون واقعا براحتی میشه شخصی سازیش کرد و حتی تابع آپلود رو هم خودت باید بنویسی.
هم بعد از مدتی کار حذف نمی شد :)
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟