هیچ دوره ای در سبد خرید شما وجود ندارد
در آموزش فعال سازی آپلود تصویر ویرایشگر CkEditor در Asp.Net Core، قصد داریم نحوه فعال سازی آپلود تصویر در ویرایشگر CkEditor در Asp.net Core را آموزش دهیم .
همیشه استفاده از یک ویرایشگر قدرتمند (CKEditor ویرایشگر) در پروژه و فراهم کردن فضای متنی که کاربر بتواند روی متن ارسال خود مدیریت داشته باشد هم کیفیت مقاله بالا میرود و هم میتواند جلوه خاصی به متن و مقاله خود دهد.CKEditor یکی از این ابزار ها است که به صورت رایگان بوده و فضای متنی قدرتمندی را برای کاربر فراهم کرده است ، استفاده از آن ساده و در بیشتر زبان های برنامه نویسی کاربرد دارد.
یکی از قابلیت های که این ویرایشگر قدرتمند دارد قرار دادن تصویر در میان فضای متنی و آپلود آن در مسیر دلخواه می باشد. در حالت پیش فرض آپلود تصویر در این ویرایشگر فعال نیست که در این آموزش ما به شما یاد می دهیم که چگونه بخش مربوط به آپلود تصویر در این ویرایشگر قدرتمند را فعال سازی کنید.
این آموزش در بسته طلایی آموزش برنامه نویسی با ASP.net وجود دارد.
مخاطبین دوره :
- افرادی که به برنامه نویسی علاقه دارند.
- علاقه مندان به Asp.net Core
- کسانی که به دنبال کسب درآمد از برنامه نویسی هستند.
- مناسب برای دانشجویان و فارغ التحصیلان مهندسی کامپیوتر
آنچه در این آموزش فرا خواهید گرفت :
- ایجاد یک پروژه Asp.net core 2.2 خام
- ایجاد یک RazorPage جهت پیاده سازی ویرایشگر CkEditor
- فراخوانی CkEditor از طریق CDN
- قرار دادن فایل Config در پروژه جهت فارسی سازی و فعال سازی بخش آپلود تصویر
- ایجاد یک Action جهت آپلود تصویر در مسیر دلخواه
پیش نیاز ها :
- آشنایی با مبحث Asp.net Core
- تسلط بر زبان C#
- آشنایی نسبی با SQL Server
تکنولوژی و نرم افزار ها :
- Visual Studio
- SQL Server
برای دریافت پکیج کامل آموزش ساخت فروشگاه اینترنتی با Asp.Net Core 2 کلیک کنید :
پکیج کامل آموزش ساخت فروشگاه اینترنتی با Asp.Net Core 2
مزایای خرید دوره :
- سورس و فایل های جانبی موردنیاز همراه با لینک های آموزش در اختیار شما قرار می گیرد.
- با تهیه این دوره آموزشی، محتوای ارزشمند برای ورود به بازار کار را به قیمت ناچیزی در اختیار دارید.
- ویدئو های آموزشی توسط واحد کنترل کیفیت ما بررسی و سطح علمی ، صدا و تصویر ، شیوه بیان و سایر موارد آن تایید می شود.
- ویدئو های آموزشی ما در حد نیاز به مباحث تئوری می پردازد و بیشتر آموزش به صورت عملی و متناسب با بازار کار می باشد.
- بلافاصله پس از ثبت سفارش لینک دانلود برای شما فعال شده و به ایمیلتان ارسال میگردد. همچنین در صورت انتخاب گزینه پستی مراحل ارسال مرسوله از طریق ایمیل به اطلاع شما میرسد.
- کیفیت تمامی دوره های سایت تضمین شده است. در صورت عدم رضایت از آموزش، به انتخاب شما یا به صورت رایگان یک یا چند آموزش معادل دیگر دریافت می کنید و یا ۷۰ درصد مبلغ پرداختی به کیف پول شما بازگشت داده می شود.
میلاد دانشجوی دوره
سلام وقت بخیر این دوره اصلا باز نمیشه لطفا بررسی کنید تشکر
Amirm2305 دانشجوی دوره
واقعا ممنون از این دوره های کاربردیتون
aslaniali457 دانشجوی دوره
سلام خیلی ممنون از آموزش خوبتون
خیلی خوب هست که منابع فارسی رو برای برنامه نویس ها قرار میدید
ان شاءالله در کارتون موفق باشید
بهنام کلانتر مدرس دوره
سلام انجام وظیفه هست
میلاد دانشجوی دوره
سلام وقت بخیر مهندس این دوره لود نمیشه فیلمش هر کاری میکنیم
علیرضا شاکزی مدرس دوره
سلام خیلی عالی و مفهومی و بی نظیر هست .دست شما درد نکنه.
میکاییل
خسته نباشید استاد
پس ما در پروژه های razor page نمیتونیم از آپلود فایل استفاده کنیم؟
بهنام کلانتر مدرس دوره
سلام میشه استفاده کرد ، چرا نشه دوست عزیز ؟؟؟
میکاییل
استاد توی کانفیگش چجوری باید روت اون handler رو بهش بدیم؟
مهران
سلام خسته نباشید
میشه بفرماییید در mvc کدهای کنتلر به چه شکل میشه؟؟ اخه IFromfile تو asp mvc نمیشناسه
ممنون میشم راهنمایی کنید
mohammadmahdioveisi1
سلام استاد
ببخشید من تونستم آموزش رو کامل پیاده کنم و حتی عکس در پوشه هم ذخیره می شود
ولی مسئله این است من در دیتابیس فیلد را استرینگ گزاشتم و وقتی با ckeditor حتی متن خالی هم میگزارم
این فیلد برای من خالی می آید
parsa
سلام استاد خسته نباشید
این ادیتور بیه حالت Easy Image داره . اگه امکان داره اونو آموزش بزارید که بسیار بهتر شده
تشکر
امید
سلام داداش ممننون از اموزشهای خوبتون
من طبق اموزش جلو رفتم
حالا بخوام وقتی عکس داخل ادیتور حذف میکنیم عکسی هم که داخل فولدر پروژه به حساب همون سرور اپلود شده پاک بشه
و
وقتی دکمه بفرست به سرور رو میزنیم و عکس به سرور ارسال میشه مبخوام اگه به هر دلیلی مررگر بسته شد یا عملیات ثبت انجام نشد اون عکسی که اپلود شده از سرور حذف شه
من چند روزه درگیر اینم میشه اگه سورسی چیزی دارین بهم بدین ممنون میشم
حسن
کاش سورس آموزش هم قرار داده بودید. من هر کاری میکنم نمیشه :-(
مریم
سلام . جناب مهندس من از روش شما استفاده کردم اما وقتی بر روی دکمه ارسال به سرور میزنم ارور 400 میدهد . مسیری رو که در پیغام خطا میدهد درست است اما Ckeditor نمیتواند به اشکن مربوطه صل شود و یک خطا در ckeditor.js که مربوط به xhr هست را نمایش میدهد .
بهنام کلانتر مدرس دوره
سلام لطفا اموزش رو با دقت بیشتری بببینید
رضا
سلام مهندس . ممنون بابت اموزش . دو تا سوال دارم من
1 – شاید ما قسمت های مختلف سایت بخوایم از این ادیتور و با این قابلیت اپلود عکس استفاده کنیم . پس ما باید برای هر قسمت فایل کانفیگ جدا ایجاد کنیم ؟
2 – ورودی اکشن ما فقط یک مورد از نوع IFormFile میگیره . ولی فرض کنید ما میخوایم چندین بار عکس لابه لای متن ها قرار بدیم , اون وقت چی میشه ؟
بهنام کلانتر مدرس دوره
سلام در جواب سوال اول شما خیر نیازی به ایجاد چندین فایل کانفیگ نیست و فقط کافیه مسیر رو بهش بدین
در جواب سوال دوم شما باید بگم که میتونید ورودی اکشن تون به صورت زیر بنویسید :
public async Task Post(List files)
}
{
برای مثال سایت زیر رو مشاهده کنید :
https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-2.2
برای مثال های بیشتر این عبارت رو تو گوگل سرچ کنید :
how to upload multi files picture with IFormFile Array in asp core
amir
سلام چطوری میشه عکس داخل ckeditor سایزش کوچیک و یا بزرگ کرد یا چطور میشه ویدیو آپلود کرد نه لینک ویدیو بدیم
بهنام کلانتر مدرس دوره
سلام
هنگامی که عکس رو اانتخاب میکنید در ckeditor یک سری گزینه ها میاد که خودتون اونجام میتونید تغییر بدین
در ضمن برای فعال سازی قسمت اپلود فیلم سایت زیر رو مشاهده کنید
https://ckeditor.com/cke4/addon/html5video
kambiz
سلام
خیلی ممنون برای این آموزش خوبتون.
یک صفحه دارم که توش همین Ckeditor هست . توی این صفحه پارامتری هست با عنوان Title ، راهی وجود داره کسی که عکس آپلود میکنه این Title به اکشن ارسال شه ؟ یعنی به جای این کد شما : var fileName = Guid.NewGuid() + Path.GetExtension(upload.FileName).ToLower();
اینجوری بشه ؟
var fileName = Title + Path.GetExtension(upload.FileName).ToLower();
ممنون میشم راهنمایی کنید مهندس
بهنام کلانتر مدرس دوره
سلام
یه فایل Config.js بود که یه قسمتی رو تنظیم کردیم برای اکشن و کنترلر
اونجا باید پارامترهای خودتون یعنی Titleبدین
kambiz
مهندس میشه راهنما کنید چجوری میتونم این پارامترو از صفحه به اکشن انتقال بدم ، و داخل config.js چی باید قرار بدم ؟ در این حد مثل شما حرفه ای نشدم هنور .
ممنون میشم راهنمایی کنید
بهنام کلانتر مدرس دوره
سلام در Route باید اینو بنویسید :
[Route(“file-upload/title”)]
و در کانفیگ :
config.filebrowserImageUploadUrl = ‘/file-upload?title’
kambiz
ممنون این جواب داد و درست شد فقط زمانی که توی ckeditor عکسو نشون میده Alt و title عکس وجود نداره میشه لطفا راهنمایی کنید چجوری اونو برگردونم ؟ الان به این شکل عکسو نشون میده :
بهنام کلانتر مدرس دوره
سلام
باید با ابزار Inspect Element مرورگر چک کنید که Ckeditor چه نامی برام نام تصویر در نظر گرفته
kambiz
نتونستم به آخرین جوابتون ، پاسخ بدم ، اینجا میدم
فکر میکنم باید توی اکشن کااری انجام داد : یعنی اینجا
return Json(new { uploaded = true, url });
چون الان عکس درست insert میشه داخل ckeditor فقط alt , title نداره
reza khan
ممنون مهندس کلانتر عالی بود
چجوری میشه Alt و Title تصویرو به اکشن FileUpload پاس داد ؟
بهنام کلانتر مدرس دوره
سلام
یه فایل Config.js بود که یه قسمتی رو تنظیم کردیم برای اکشن و کنترلر
اونجا باید پارامترهای خودتون یعنی Alt و Titleبدین
reza Khan
از پاسخ شما ممنونم خوندم که به دوستمون چه راهکاری پیشنهاد دادید
منم همین جوری کردم منتها مقداری رو از textbox که هست نمیخونه و null ارسال میشه
این درست ارسال میشه :
config.filebrowserImageUploadUrl = ‘/file-upload?name=test’;
اما این خیر :
config.filebrowserImageUploadUrl = ‘/file-upload?name=’+$(“#textbox”).val();
خداخیرتون بده لطفا این رو کمک کنید حل شه
بهنام کلانتر مدرس دوره
سلام دوست عزیز
راه حل درستش به این صورت است
config.filebrowserImageUploadUrl = ‘/file-upload?name=test’;
احتمالا شما php کار هستید ؟؟؟
محمدرضا کاظمی
آقای مهندس کلانتر متشکر
peyman
بازم ممنون مهندس کلانتر عالی بود مثل همیشه
بهنام کلانتر مدرس دوره
سلام مرسی
عرفان
سلام ، ممنون اگر ممکن هست نحوه ایجاد یک View توسط کاربر در زمان اجرا و افزودن المانهای مورد نیاز به این ویو و تولید اکشن مربوط به این صفحه و مواردی که به نظر شما باید توی این چالش بررسی بشن روآموزش بدید.تشکر