ورود / ثبت نام
0
0

مقاله ی آموزش آپلود تصویر با CKEditor

869 بازدید
آپلود عکس با CKEditor

آپلود عکس با CKEditor

Ckeditor یکی از پرکاربردترین ویرایشگر های WYSIWYG برای برنامه های وب است. در طول زمان CKeditor با اضافه شدن ویژگی های جدید که منجر به آسان تر شدن ویرایش متون HTML میشد در حال پیشرفت بوده است. زمانی که در حال استفاده از یک ویرایشگر WYSIWYG هستیم در اکثر اوقات نیاز به آپلود تصویر در سرور و جاری هستیم . به طور پیش فرض CKeditor  از تصاویری که قبلا آپلود شده اند یا از یک منبع خارجی که از آدرسش ارائه میشود برای استفاده در خود پشتیبانی میکند.، ما پیش CKeditor و نحوه استفاده از آن نیز آموزش داده بودیم که میتوانید استفاده کنید.

در این مقاله با هم میبینیم که چگونه میتوانیم یک تصویر را در وب سایتمان آپلود کنیم و آن را در CKeditor با استفاده از راه حل آسان زیر جاسازی کنیم. CKeditor یک خصوصیت بنام filebrowserImageUploadUrl دارد که گزینه برای آپلود تصاویر به سرور را در زمان پیکربندی به ما ارائه میدهد. این خصوصیت یک آدرس فایل آپلودر میگیرد (یک صفحه یا کنترل کننده) تا تصویر انتخاب شده را در سرور آپلود کند. کنترل کننده که مسئول آپلود کردن تصویر است باید آدرس تصویر را برای نمایش در CKeditor برگرداند. به محض آنکه خصوصیت filebrowserImageUploadUrl پیکربندی شد شما قادر به دیدن یک tab جدید بنام Upload در پنجره ی Image Properties مربوط به CKeditor هستید.

مراحل زیر را دنبال کنید تا توابع آپلود عکس را CKeditor در ASP.NET ادغام کنید. اینم از راه حل :

۱ یک وب سایت جدید بنام CKeditorDemo در ASP.Net بسازید.

۲ CKEditor را از لینک زیر دانلود کنید و آن را در فولدر root استخراج کنید.

۳ فولدر جدیدی بنام Images در فولدر root خود بسازید.

۴ فایل کنترل کننده ی ASHX جدید (Upload.ashx) را اضافه کنید و کد زیر را درون آن کپی پیست کنید.

<%@ WebHandlerLanguage="C#"Class="Upload"%>
using System;
using System.Web;
public class Upload : IHttpHandler{    
    public voidProcessRequest (HttpContext context) {
       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);
       //provide direct URL here
       string url = "http://localhost/CKeditorDemo/Images/"+ file;  
        
       context.Response.Write("<script>window.parent.CKEDITOR.tools.callFunction(
         "+                                             CKEditorFuncNum + 
         ", \"" + url + "\");</script>");
       context.Response.End();             
    }

    public boolIsReusable {
        get { return false; }
    }
}

۵ script ها را صدا بزنید و Textbox را با ID= “txtCkEditor” در فایل aspx مشخص کنید.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
    $(function () {
CKEDITOR.replace('<%=txtCkEditor.ClientID %>', 
  { filebrowserImageUploadUrl:  '/CKeditorDemo/Upload.ashx' }); //path to “Upload.ashx”
    });
</script>

<asp:TextBox ID="txtCkEditor" TextMode="MultiLine" runat="server"></asp:TextBox>

۶ کار تنظیمات به اتمام رسید. حال با راه اندازی وب سایت میتوانید پیکربندی CKEditor را در صفحه ببینید.

آپلود عکس با CKEditor۷ سپس آیکون تصویر را در CKeditor انتخاب کنید تا تصویر را آپلود کنید.

آپلود عکس با CKEditor۸ تصویر را با کلیک بر روی دکمه ی browser در tab آپلود انتخاب کنید و دکمه ی “Send it to the Server” را برای ذخیره ی نصویر در سرور بزنید.

آپلود عکس با CKEditor۹ تصویر آپلود شده پس از کلیک بر روی OK در CKeditor نمایش داده میشود.

سوال و نظراتتان را با من درمیان بگذارید.

با تشکر از وقتی که برای خواندن این مقاله گذاشتید.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=14249
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

3 نظر در مورد مقاله ی آموزش آپلود تصویر با CKEditor

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. باسلام و خسته نباشید .
    من از ckeditor استفاده می کنم در asp mvc و پلاگین imageuploader رو نصب کردم هنگام زدن گزینه Brows Server با پیغام زیر روبرو می شوم

    HTTP Error 404.0 – Not Found
    The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
    و url هم در پایین درج می کنم :
    http://localhost:17266/Admin/ckeditor/plugins/imageuploader/imgbrowser.php?CKEditor=sampleEditor&CKEditorFuncNum=1&langCode=en

    لایک