آموزش و سورس ckeditor با قابلیت آپلود عکس در Asp.Net
0 0

آموزش و سورس ckeditor با قابلیت آپلود عکس در Asp.Net


آموزش و سورس ckeditor با قابلیت آپلود عکس در Asp.Net

در این پست سورس و آموزش آپلود تصویر در ckeditor در Asp.Net را برای شما آماده کرده ایم.

در پست های قبلی آموزش و سورس سه تا از ویرایشگراهای متن را در سایت قرار داده بودیم

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

توجه: در سورسی که قرار داده ایم امکان آپلود در ckeditor وجود دارد

سپس روی سلوشن خود کلیک راست کنید و Add را انتخاب کنید و سپس Add New Item را انتخاب کنید در پنجره ای که باز می شود Handler.ashx را انتخاب کنید و سپس نام آن را می توانید هر چیزی قرار دهید ما در اینجا نام Upload.ashx در نظر گرفته ایم

سپس کد زیر را به آن اضافه کنید

HttpPostedFile uploads = context.Request.Files["upload"];
string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
string file = System.IO.Path.GetFileName(uploads.FileName);
uploads.SaveAs(context.Server.MapPath(".") + "\\Images\\" + file);
string url = "/Images/+ file;
context.Response.Write( <script>window.parent.CKEDITOR.tools.callFunction("+ CKEditorFuncNum + ", \"" + url + "\");</script>>");
context.Response.End(); 

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

در این مرحله یک TextBox به صفحه ای که می خواهید اضافه کنید و سپس کد زیر را قبل از TextBox قرار دهید

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
 	<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
 	<type="text/javascript">
 	   $(function () {
 	    CKEDITOR.replace('<%=txtContent.ClientID %>',
 	     { filebrowserImageUploadUrl: '/Upload.ashx' });
 	   });uploads = context.Request.Files["upload"];
 	</script>
<asp:TextBox ID="txtContent" runat="server" Rows="8" Columns="45" TextMode="MultiLine" />

در کد بالا ایتدا آخرین نسخه JQuery به برنامه اضافه شده و همچنین فایل ckeditor نیز اضافه شده و در نهایت اسم Upload.ashx را جهت آپلود مشخص شده است.

در زیر لینک دانلود کامل سورس به همراه توضیحات آن جهت دانلود قرار داده شده. در پست های بعدی آموزش همین سورس در MVC5 نیز داده خواهد شد.

دانلود

نویسنده حسین فتحی
گروه مطلب Asp.Net
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۱۶ آذر ۱۳۹۳
منبع ایران گنج
تعداد نظرات ۷
قیمت کاربران VIP
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

تعداد نظرات : ۷

  • elham

    با سلام.

    وقتی میخوام مطلب سی کا ادیتور رو ذخیره کنم ارور میده که این کنترل نمیتونه مقدار اچ تی ام ال بگیره.تا قبل از افزودن تابع تو اسکریپت برنامم درسته اما بعد....

    پاسخ
    • مدیر

      سلام

      نباید این خطا رو بده ببین مسیر فایل جاوااسکرپت رو درست دادید. سورس رو دانلود کنید و تست کنید

      پاسخ
  • امیر

    Server Error in '/' Application. The resource cannot be found. سلام وقتی روی فرستادن به سرور رو میزنم این ارور میاد چه کاری باید بکنم فایل هندلر آپلد رو برصیکردم در همن پشه هست لی باز نمیدنم مشکل چی هست!!! Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly. Requested URL: /Upload.ashx Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.5.27.0

    پاسخ
    • مدیر

      با سلام و درود به شما کاربر گرامی

      سورسی که برای دانلود قرار داده شده در Asp.Net 2013 نوشته شده ولی اگه مراحلی که توضیح داده شده را به درستی در هر نسخه ای بروید مشکلی پیش نمیاد. این خطایی که می دهد جایی از کد مسیر را به درستی وارد نکردید

      پاسخ
  • ali

    ممنون بابت جواب ولی منظورم این است که وقتی روی گنجاندن / ویرایش پیوند کلیک می کنم مثل گزینه تصویر انتقال به سرور را هم داشته باشد.

    پاسخ
  • علی

    خیلی کاربردی بود لطفا برای آپلود فایل از داخل سرور را هم بگزارید یا همینطور فایل فلش

    پاسخ
    • مدیر

      با سلام و درود به شما کاربر گرامی

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

      پاسخ

این صفحه را می‌پسندم