آموزش Asp.Net MVC کار با CKEditor 5

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

• بخش ۱ ـ CKEditor چیست؟
• بخش ۲ ـ آماده‌سازی پروژه ASP.NET MVC برای CKEditor
• بخش ۳ ـ نحوه دانلود و سفارشی‌سازی CKEditor 5
• بخش ۴ ـ پلاگین‌های پیشنهادی CKEditor 5
• بخش ۵ ـ نحوه فراخوانی CKEditor 5
• بخش ۶ ـ نمایش اطلاعات بدون نمایش تگ‌های HTML

CKEditor چیست؟

CKEditor به کاربران اجازه می‌دهد انواع مختلفی از محتوا مانند اسناد، گزارش‌ها، ایمیل‌ها، یادداشت‌ها و پیام‌های چت را در برنامه ایجاد و ویرایش کنند. در واقع، CKEditor یک ویرایشگر آنلاین WYSIWYG مبتنی بر جاوا اسکریپت است که برای ویرایش محتوای HTML در مرورگر کاربرد دارد.

علاوه بر این، CKEditor یک ویرایشگر متن قدرتمند و مدرن با معماری MVC است. در این آموزش از CKEditor 5 استفاده می‌کنیم. CKEditor 5 نسبت به نسخه قبلی خود رویکردی متفاوت و مدرن دارد؛ زیرا توسعه‌دهندگان آن را از ابتدا با ES6 نوشته‌اند.

آماده‌سازی پروژه ASP.NET MVC برای CKEditor

پروژه‌های ASP.NET MVC به آماده‌سازی خاصی نیاز ندارند. بااین‌حال، باید Data Annotationهای زیر را به فیلدهایی که قرار است از CKEditor استفاده کنند، اضافه کنید:

[DataType(DataType.MultilineText)]
[AllowHtml]

Data Annotation اول، ورودی موردنظر را به یک TextArea تبدیل می‌کند.

همچنین Data Annotation دوم به برنامه اجازه می‌دهد اطلاعات دارای تگ‌های HTML را دریافت و در پایگاه داده ذخیره کند.

نحوه دانلود و سفارشی‌سازی CKEditor 5

بهتر است CKEditor 5 را بر اساس نیازهای پروژه خود سفارشی‌سازی کنید. به این ترتیب، می‌توانید قابلیت‌ها و ماژول‌های موردنیاز را به آن اضافه کنید و موارد اضافی را کنار بگذارید. خوشبختانه، وب‌سایت CKEditor امکان انتخاب و سفارشی‌سازی قابلیت‌های ویرایشگر را در اختیار شما قرار می‌دهد.

• برای ورود به وب‌سایت CKEditor از لینک زیر استفاده کنید:

https://ckeditor.com/

• سپس برای دانلود CKEditor 5 وارد صفحه زیر شوید:

https://ckeditor.com/ckeditor-5/download/

پلاگین‌های پیشنهادی CKEditor 5

در هنگام سفارشی‌سازی CKEditor 5 می‌توانید پلاگین‌های موردنیاز پروژه را انتخاب کنید. برای مثال، پلاگین‌های زیر قابلیت‌های کاربردی و مهمی را در اختیار شما قرار می‌دهند.

• پلاگین‌های HTML

General HTML Support
HTML comment
HTML embed

• پلاگین‌های Image

Image
Auto image
Image resize
Image insert
Link image

• پلاگین‌های Font

Font background color
Font color
Font size

• پلاگین Source

Source editing

• پلاگین‌های Code

Code
Code blocks

• پلاگین Alignment

Alignment

نحوه فراخوانی CKEditor 5

پس از دانلود CKEditor 5، برای اضافه کردن آن به پروژه مراحل زیر را انجام دهید:

• گام اول: فایل دانلودشده را از حالت فشرده خارج کنید و پوشه آن را در روت پروژه قرار دهید.
• گام دوم: سپس فایل ckeditor.js را از پوشه build به View موردنظر اضافه کنید.

<script src="~/ckeditor5/build/ckeditor.js"></script>

• گام سوم: اکنون یک textarea با کلاس editor به View خود اضافه کنید.

<textarea class="editor"></textarea>

• گام چهارم: در ادامه، برای فراخوانی CKEditor 5 از کد زیر استفاده کنید.

ClassicEditor
    .create(document.querySelector('.editor'), {
        // Editor configuration.
    })
    .then(editor => {
        window.editor = editor;
    })
    .catch(handleSampleError);

function handleSampleError(error) {
    const issueUrl = 'https://github.com/ckeditor/ckeditor5/issues';
    const message = [
        'Oops, something went wrong!',
        `Please, report the following error on ${issueUrl} with the build id "npwdoukyfz5-3bd6as171pns" and the error stack trace:`
    ].join('\n');

    console.error(message);
    console.error(error);
}

• گام پنجم: در نهایت، برای استفاده از قابلیت‌های مربوط به تگ‌های HTML، کد زیر را در بخش Editor configuration قرار دهید.

htmlSupport: {
    allow: [
        {
            name: /.*/,
            attributes: true,
            classes: true,
            styles: true
        }
    ]
}

نمایش اطلاعات بدون نمایش تگ‌های HTML

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

// نمایش متن به همراه تگ‌های HTML
@Html.DisplayFor(modelItem => item.PostContent)

// تفسیر تگ‌های HTML و اعمال آن‌ها روی متن
@Html.Raw(item.PostContent)

توجه داشته باشید که Html.Raw محتوای HTML را بدون Encode کردن نمایش می‌دهد. بنابراین، فقط محتوای قابل‌اعتماد یا محتوایی را که قبلاً پاک‌سازی کرده‌اید، با این روش نمایش دهید؛ زیرا در غیر این صورت ممکن است سایت با حملات XSS روبه‌رو شود.