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

در این پست قصد داریم درباره کار با CKEditor 5 آموزشی را به صورت ویدیویی ارائه دهیم . سرفصل مواردی که در این آموزش مورد برسی قرار دادیم شامل موارد زیر است :

• بخش ۱ – CKEditor چیست !
• بخش ۲ – آماده سازی پروژه Asp.net MVC برای CKeditor
• بخش ۳ – نحوه دانلود و سفارشی سازی CKEditor 5
• بخش ۴ – پلاگین های پیشنهادی CKEditor 5
• بخش ۵ – نحوه فراخوانی CKEditor 5
• بخش ۶ – نمایش اطلاعات بدون تگ های Html

CKEditor چیست ؟

ادیتور CK به کاربران اجازه می دهد تا هر نوع محتوایی را در برنامه شما ایجاد کنند، مثل اسناد، گزارش ها، ایمیل ها، یادداشت ها یا پیام های چت. CKEditor یک ویرایشگر آنلاین WYSIWYG جاوااسکریپتی است که برای ویرایش اسناد HTML در مرورگر استفاده می شود. CKEditor یک ویرایشگر متن قدرتمند و فوق مدرن جاوا اسکریپتی با معماری MVC است. آخرین نسخه از CKEdiotr نسخه ۵ آن یعنی CKEditor 5 است. CKEditor 5، رویکردی متفاوت و مدرن نسبت به نسخه قبلی خود دارد که از ابتدا در ES6 نوشته شده است.

آماده سازی پروژه Asp.net MVC برای CKeditor

پروژه های Asp.net MVC نیاز به آماده سازی خاصی ندارند فقط فیلد هایی که قرار است از CKeditor استفاده کنند باید به آن Data Annotation – دیتا انوتیشن های زیر اضافه شود.

[DataType(DataType.MultilineText)]
[AllowHtml]

Data Annotation اول باعث میشود تا Input ما تبدیل به TextArea شود.

Data Annotation دوم به ما اجازه میدهد تا اطلاعاتی با فرمت Html را در دیتابیس ذخیره کنیم.

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

بهتر است CKEditor نسخه ۵ را به صورت سفارشی دانلود کنید. یعنی قابلیت ها و ماژول هایی که نیاز دارید را به آن اضافه کنید و آنهایی که نیاز ندارید را حذف کنید. خوشبختانه این قابلت در سایت CKEditor وجود دارد.

• آدرس سایت CKEditor 

https://ckeditor.com/

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

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

• دانلود CKEditor از سایت تهران آی تی

پلاگین های پیشنهادی 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

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

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

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

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

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

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 روی متن اعمال شود. میتوانید به جای استفاده از هلپر Html.DisplayFor از هلپر Html.Raw استفاده کنید.

//نمایش متن همراه با کد های اچ تی ام ال
@Html.DisplayFor(modelItem => item.PostTitle)
//عدم نمایش کد های اچ تی ام ال و اعمال آن روی متن
@Html.Raw(item.PostContent)