چه دوره ای می خواهید یاد بگیرید؟

آینده خود را با دوره های آموزشی دانشجویار تضمین کنید

بیش از ۱۰ هزار ساعت ویدئوی آموزشی

بیش از ۵۰ هزار دانشجو

بیش از ۳۰۰ مدرس

صفحه نخست
 » 
رشته کامپیوتر
 » 
برنامه نویسی وب
 » 
آموزش ASP
 » 
آموزش core
 » 
آموزش فعال سازی آپلود تصویر در ویرایشگر CkEditor در Asp.Net Core
۱۷ نظر
بازدید : 739 بازدید
آموزش فعال سازی آپلود تصویر در ویرایشگر CkEditor در Asp.Net Core

آموزش فعال سازی آپلود تصویر ویرایشگر CkEditor در Asp.Net Core

همیشه استفاده از یک ویرایشگر قدرتمند (CKEditor ویرایشگر) در پروژه و فراهم کردن فضای متنی که کاربر بتواند روی متن ارسال خود مدیریت داشته باشد هم کیفیت مقاله بالا میرود و هم میتواند جلوه خاصی به متن و مقاله خود دهد.CKEditor یکی از این ابزارهاست که به صورت رایگان بوده و فضای متنی قدرتمندی را برای کاربر فراهم کرده و استفاده از آن ساده بوده و در بیشتر زبان های برنامه نویسی کاربرد دارد.

یکی از قابلیتهای که این ویرایشگر قدرتمند دارد قرار دادن تصویر در میان فضای متنی و آپلود آن در مسیر دلخواه می باشد. در حالت پیش فرض آپلود تصویر در این ویرایشگر فعال نیست که در این آموزش ما به شما یاد میدهیم که چگونه بخش مربوط به آپلود تصویر در این ویرایشگر قدرتمند را فعال سازی کنید.


 

مواردی که در این آموزش یاد خواهید گرفت:

  •  ایجاد یک پروژه Asp.net core 2.2 خام
  • ایجاد یک RazorPage جهت پیاده سازی ویرایشگر CkEditor
  • فراخوانی CkEditor از طریق CDN
  • قرار دادن فایل Config در پروژه جهت فارسی سازی و فعال سازی بخش اپلود تصویر
  • ایجاد یک Action جهت اپلود تصویر در مسیر دلخواه

 

امیدواریم از این آموزش استفاده لازم را ببرید.

مشاهده دموهایی از آموزش

مطلب مفیدی برای شما بود ؟؟ پس به اشتراک بگذارید برای دوستانتان

دریافت کنید

در صورتی که توضیحات نوشته، دموی آموزش و لینک های ارزیابی پاسخگوی سوالات شما در مورد این دوره آموزشی نمی باشد و نیاز به مشاوره بیشتری دارید لطفا این فرم را تکمیل کرده و در ساعات اداری منتظر تماس همکاران ما باشید.
  • *
  • *
  • *
  • *
  • در صورتی که توضیحات نوشته، دموی آموزش و لینک های ارزیابی پاسخگوی سوالات شما در مورد این دوره آموزشی نمی باشد و نیاز به مشاوره بیشتری دارید لطفا این فرم را تکمیل کرده و در ساعات اداری منتظر تماس همکاران ما باشید.

    پیام شما با موفقیت ثبت شد. در اولین فرصت با شما تماس گرفته خواهد شد.
    • مطالب مرتبط
    • دیگر آموزش های مرتبط با این مدرس
    • رزومه مدرس

    نظرات کاربران

    ۱۷
    • 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 توسط کاربر در زمان اجرا و افزودن المانهای مورد نیاز به این ویو و تولید اکشن مربوط به این صفحه و مواردی که به نظر شما باید توی این چالش بررسی بشن روآموزش بدید.تشکر

    بهنام کلانتر طراح و توسعه دهنده افزونه و قالب وردپرس

    به نام خدا با عرض سلام بنده برنامه نویسی رو از سال 1392 به طور جدی شروع کردم و برنامه نویسی رو به عنوان شغل اصلی آیندم انتخاب کردم در طی این چند سال پبشرفت خوبی داشتم و تونستم تا حدودی همراه با پلتفرمهایی که مایکروسافت ارائه میده همراه باشم و همیشه سعی در این بودم که مطالبی که در دیگر وب سایت ها نبوده یا حداقل در قالب یک مقاله بوده رو اون مطلب رو به صورت فیلم آموزشی به زبان فارسی در سایت بزرگ دانشجویار ارائه بدم و کاربران از این روش استقبال خوبی کردند و همچنین این شیوه کاری بنده رو تحسین کردند. بیشتر آموزشهایی که ضبط کردم پروژه محور هستند چون اعتقاد بنده بر این مبناست که : 90درصد افراد برای اینکه مطالب برنامه نویسی رو به خوبی درک کنند باید به صورت پروژه ای کار کنند تا مطالب براشون جا بیفته

    دسته بندی

    آموزش الکترونیک

    آموزش بازی سازی

    آموزش شبکه

    برنامه نویسی موبایل

    برنامه نویسی ویندوز

    پایگاه داده

    تحصیلات تکمیلی

    دروس دانشگاهی

    رشته الکترونیک

    رشته کامپیوتر

    سایر دسته های دانشجویار

    سایر نرم افزارها

    طراحی سایت

    طراحی و گرافیک

    کلاس آنلاین

    نرم افزارهای کاربردی

    هوش مصنوعی

    مدرسین

    تعداد دوره
    بر اساس امتیاز
    حروف الفبا

    مطالب سایت بر اساس

    جدیدترین ها
    محبوب ترین ها
    بطور تصادفی
    دانشجویار مجوز نشر دیجیتال لوگو شرکت به پرداخت ملت logo-samandehi دانشجویار مجوز سازمان فنی حرفه ای کشور
    55 تا 65 درصد تخفیف در جشنواره بهاره دانشجویار - کلیک کنید کد تخفیف: bahar