استفاده از CKEditor و آپلود تصویر در MVC

در این مقاله قصد داریم از ادیتور پرقدرت و زیبای CKEditor در MVC استفاده کنید

سلام دوستان

در این مقاله قصد داریم از CKEditor در MVC استفاده کنید

باید آپبود تصویر روی هاست را نیز به آن اضافه کنیم

ابتدا باید فایلها و کتابخانه های CKEditor را به پروژه اضافه کنید

در کنار نمونه ضمیمه شده یک فولدر وجود داره با نام ckeditor آن را به پروژه خود اضافه کنید

سپس کتابخانه های زیر را به View رفرنس بدید

    <mce:script src="~/ckeditor/ckeditor.js" mce_src="~/ckeditor/ckeditor.js"></mce:script>
    <mce:script src="~/ckeditor/adapters/jquery.js" mce_src="~/ckeditor/adapters/jquery.js"></mce:script>

بعد باید در View یک TextArea اضافه کنید

  <textarea id="my-textarea" name="Mytext">

و با استفاده از جاوااسکریپت بعد از لود آن را به ادیتور تغییر دهیم

    <mce:script type="text/javascript"><!--
        $(function () {
            $('#my-textarea').ckeditor();
        });
// --></mce:script>

و بعد برای آپلود تصویر یک ActionResult میسازیم

        [HttpPost]
        public ActionResult UploadImage(HttpPostedFileBase upload, string CKEditorFuncNum, string CKEditor,
            string langCode)
        {
            string vImagePath = String.Empty;
            string vMessage = String.Empty;
            string vFilePath = String.Empty;
            string vOutput = String.Empty;
            try
            {
                if (upload != null && upload.ContentLength > 0)
                {
                    var vFileName = DateTime.Now.ToString("yyyyMMdd-HHMMssff") +
                                    Path.GetExtension(upload.FileName).ToLower();
                    var vFolderPath = Server.MapPath("/Upload/");
                    if (!Directory.Exists(vFolderPath))
                    {
                        Directory.CreateDirectory(vFolderPath);
                    }
                    vFilePath = Path.Combine(vFolderPath, vFileName);
                    upload.SaveAs(vFilePath);
                    vImagePath = Url.Content("/Upload/" + vFileName);
                    vMessage = "تصویر با مفقیت ذخیره شد";
                }
            }
            catch
            {
                vMessage = "There was an issue uploading";
            } 
            vOutput = @"<html><body><mce:script type="text/javascript"><!--
window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + vImagePath + "\", \"" + vMessage + "\");
// --></mce:script></body></html>";
            return Content(vOutput);
        }

خب حالا با به ادیتور بگیم فایل ها را به Action ما ارسال کند

در فولدر فایلها فایل config.js را باز کرده و قسمت زیر را به آن اضافه میکنیم

نام کنترلر و نام اکشن

 config.filebrowserImageUploadUrl = '/Test/UploadImage';

خب حالا میتوانید از این ادیتور زیبا و پرکاربرد استفاده کنید

موفق و پیروز باشید

نمونه ضمیمه شده است

فایل های ضمیمه

CKeditor_UploadImage_MVC.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

استفاده از CKEditor و آپلود تصویر در MVC

فایل های ضمیمه

ایمان مدائنی

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید