مقاله ی آموزش آپلود تصویر با 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 انتخاب کنید تا تصویر را آپلود کنید.

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

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

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

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