آموزش ساخت text editor در mvc

1398-11-15

بسیاری از افرادی که کار با ASP.NET MVC را آغاز می‌کنند و دوره مقدماتی آموزش را می‌گذرانند، برای افزودن اطلاعات به پایگاه داده وقتی میخواهند یک متنی را وارد کنند که این متن شامل عکس ها و رنگ های متفاوت باشد و همچنین دارای کد html باشد به مشکل می‌خورند. به عنوان مثال فرض کنید که سایت فروشگاهی دارید که میخواهید برای فرم افزودن محصول یک فیلد برای ورود توضیحات محصول قرار دهید، اگر با input های html کار کنید کار با آن سخت می‌شود و حرفه ای نیست.

ما در این مقاله از پرعلم قصد داریم تا شما را به یک ادیتور متن به نام CKEditor آشنا کنیم که می‌توانید به راحتی از آن پروژه خود استفاده کنید و یک ادیتور متن مانند تصویر زیر داشته باشید:

آموزش افزودن CKEditor به پروژه ASP.NET MVC

1 – در ابتدا یک پروژه جدید از نوع ASP.NET Web Application با پوشه های MVC بسازید.

مراحل ایجاد پروژه ASP.NET MVC در Visual Studio

2 – حال در Solution روی نام پروژه کلیک راست کرده و روی Manage Nuget Packages کلیک کنید.

3 – حالا در این قسمت روی Brows کلیک کرده و عبارت ‘ ckeditor.mvc ‘ را جستوجو کنید. و پکیجی که در تصویر زیر می‌بینید را نصب کنید.

4 – پس از اینکه نصب تمام شد پوشه ی Views/Shared را بررسی کنید، باید یک پوشه به نام Editor Template در اینجا وجود داشته باشد که درون این پوشه فیلی به نام Html.cshtml وجود دارد. آن را باز کنید.

5 – در این فایل 1 خط کد وجود دارد که ما باید مواردی را به آن اضافه کنیم

به مسیر Scripts/ckeditor/adapters رفته و فایل Jquery.js را بکشید و در اینجا قرار دهید.
به مسیر Scripts/ckeditor رفته و فایل ckeditor.js را بکشید و در اینجا قرار دهید.
سپس چند خط کد jquery می‌نویسیم که ادیتور ما کار کند. این کد ها را در تصویر زیر مشاهده می‌کنید.

حالا کار اضافه کردن CKEditor به پروژه تمام شد و وقت استفاده از آن فرارسیده است.

پروژه های دانشجویی رشته کامپیوتر با قیمت پایین پذیرفته میشود

طریقه استفاده از CKEditor در ASP.NET MVC

6 – در پوشه ی Model یک کلاس جدید ایجاد می‌کنیم، در آن 2 Prop وجود دارد :

public int ID
public string Content

7 – در بالای پراپرتی Content باید 2 عدد Attribute بنویسیم :

نکته : نامی که در UIHint می‌نویسیم، همان نام فایلی است که در Shared/Editor Template ایجاد شد.
نکته : برای افزودن Attribute باید namespace های آن را بیافزاییم :

using System.ComponentModel.DataAnnotations;

8 – حالا به Home Controller رفته و یک متد Action اضافه می‌کنیم. (ما برای افزودن محصول استفاده کردیم)

9 – حالا روی اکشن کلیک راست کرده و Add View را انتخاب می‌کنیم، این View را از نوع Create برای کلاسی که ساختیم در نظر می‌گیریم.

10 – درون View برای فیلد Content از Html.EditorFor استفاده می‌کنیم.

<div>
@Html.EditorFor(m=>m.Content)
</div>

11 – حالا پروژه را Build کرده و اجرا کنید. مشاهده می‌کنید که ادیتور CkEditor به خوبی کار می‌کند.

نکات مهم:

همانطور که گفتیم برای Content باید Attribute به عنوان AllowHtml را حتما قرار دهید، زیرا به صورت پیشفرض وقتی کد html به سمت سرور فرستاده می‌شود، آن را مخرب دانسته و اجازه ی عبور نمی‌دهد.
هنگامی که می‌خواهید این فیلد را فراخوانی کنید و آن را در یک صفحه، نمایش دهید از Html.Raw استفاده کنید که کد های html را مجاز بداند.