در این مقاله به آموزش استفاده از این ادیتور و همچنین افزودن قابلیت آپلود تصاویر می پردازیم.
ابتدا ckeditor را از سایت ckeditor.com دانلود نمایید و به روت اصلی برنامه اضافه نمایید.
پس از ایجاد پروژه از نوع MVC یک کنترلر به برنامه اضافه نمایید و محتوای آنرا بصورت زیر ویرایش کنید.
public ViewResult Index()
{
return View();
}
[HttpPost]
[ValidateInput(false)]
public ViewResult Index(string Mytext)
{
return View();
}
[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><script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + vImagePath + "\", \"" + vMessage + "\");</script></body></html>";
return Content(vOutput);
}
یک پوشه بنام Upload درون پروژه ایجاد نمایید این پوشه جهت ذخیره تصاویر مورد استفاده قرار میگیرد.
ویوی متناظر با اکشن index را بصورت زیر ویرایش نمایید
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<form action="/Home/Index" method="POST">
<textarea id="mytextarea" name="Mytext"></textarea>
<input type="submit" value="OK" />
</form>
@section Script
{
<script src="~/ckeditor/ckeditor.js"></script>
<script src="~/ckeditor/adapters/jquery.js"></script>
<script>
$(function () {
$('#mytextarea').ckeditor();
});
</script>
}
در ویوی فوق کنترل متنی بنام mytextarea ایجاد کردیم و سپس با اتصال فایلهای جاوا اسکرسپتی ckeditor.js , jquery.js و سپس نوشتن دستور $('#my-textarea').ckeditor(); کنترل متنی خود را بصورت یک ویرایشگر تبدیل مینماییم.
دقت نمایید جهت اجرای برنامه شما باید علاوه بر فایلهای جاوااسکریپت فوق فایل jquery را نیز به برنامه اضافه نمایید.
فایل config.js را درون ckeditor بیابید و دستورات زیر را به آن اضافه نمایید.
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.contentsLangDirection = 'rtl';
config.language = 'fa';
config.filebrowserImageUploadUrl = '/Home/UploadImage';
در عبارت بالا کلمه Home نام کنترلر موجود در برنامه میباشد .
بنابراین با توجه به کدهای درج شده در قسمت کانفیگ برنامه جهت آپلود تصاویر از اکشن UploadImage استفاده مینماید.
برنامه را اجرا نمایید سپس بر روی آیکون image کلیک نمایید و در صفحه باز شده بر روی گزینه انتقال به سرور کلیک نمایید و تصویر مورد نظر را آپلود کنید و در پایان بر روی گزینه به سرور بفرست کلیک کنید تا عملیات انتقال تصویر به سرور انجام شود سپس بر روی گزینه پذیرش کلیک کنید تا تصویر در ادیتور شما نمایش داده شود.
