دانلود نمونه سورس کد استفاده از CKEditor 5 (با کد Block) و Highlight.js در فرم‌های وب ASP.NET


در دنیای توسعه وب، ادغام ابزارهای ویرایش متن غنی و قابلیت‌های هایلایت کردن کد، نقش حیاتی در بهبود تجربه کاربری و ارتقاء کیفیت پروژه‌های تحت وب ایفا می‌کند. یکی از راهکارهای محبوب و قدرتمند در این حوزه، استفاده از CKEditor 5 است که به عنوان یک ویرایشگر متن غنی و قابل توسعه، امکانات بی‌نظیری را در اختیار توسعه‌دهندگان قرار می‌دهد؛ ولی در کنار آن، بهره‌گیری از Highlight.js برای هایلایت کردن کدهای برنامه‌نویسی، قابلیت بی‌نظیری است که می‌تواند در پروژه‌های آموزشی، مستندات و صفحات فنی بسیار موثر باشد.
در این مقاله، قصد داریم به صورت کامل و جامع، نحوه دانلود، پیاده‌سازی و ادغام این دو ابزار در فرم‌های وب ASP.NET را بررسی کنیم. این فرآیند شامل مراحل نصب، پیکربندی، نمونه کدهای عملی، و نکات مهم است که در ادامه به تفصیل توضیح داده می‌شود.
اول: آشنایی با CKEditor 5 و Highlight.js
CKEditor 5، نسخه‌ی جدید و پیشرفته‌ی این ویرایشگر متن است که با معماری مبتنی بر ویجت‌های مدرن و قابلیت‌های زیادی مانند ویرایش زنده، پشتیبانی از چندین زبان، و امکان افزودن پلاگین‌های مختلف، توانسته است جایگاه ویژه‌ای در بین توسعه‌دهندگان پیدا کند. این ویرایشگر، با بهره‌گیری از ساختار Modular و قابلیت‌های سفارشی‌سازی بالا، به توسعه‌دهندگان اجازه می‌دهد تا آن را مطابق نیازهای پروژه خود تنظیم کنند.
از سوی دیگر، Highlight.js یک کتابخانه‌ی جاوااسکریپتی است که برای هایلایت کردن سینتکس کدهای برنامه‌نویسی در صفحات وب طراحی شده است. این کتابخانه، با پشتیبانی از زبان‌های مختلف، قابلیت‌های بسیار متنوع و ظاهری زیبا، به راحتی قابل ادغام است و می‌تواند کدهای برنامه‌نویسی را به صورت واضح و چشم‌نواز نمایش دهد.
دوم: دانلود و نصب CKEditor 5 در پروژه ASP.NET
برای شروع، ابتدا نیاز است که فایل‌های CKEditor 5 را دانلود کنیم. می‌توان این کار را از طریق سایت رسمی CKEditor انجام داد یا با استفاده از CDN، فایل‌ها را در پروژه خود وارد کنیم. بهترین روش، استفاده از CDN است، زیرا نیاز به دانلود فیزیکی فایل‌ها ندارد و نصب سریع‌تر انجام می‌شود.
در فایل HTML یا Razor view خود، کافی است که تگ `<script>` مربوط به CKEditor 5 را اضافه کنیم. مثلا: 
html  


<script src="https://cdn.ckeditor.com/ckeditor5/
  1. 0.1/classic/ckeditor.js"></script>

سپس، با اضافه کردن یک عنصر `<textarea>` یا `<div>` که به عنوان منطقه ویرایشگر عمل می‌کند، و فعال‌سازی CKEditor بر روی آن، کار را شروع می‌کنیم. مثلا: 
html  


<textarea id="editor"></textarea>


<script>


  ClassicEditor  


    .create( document.querySelector( '#editor' ) )


    .catch( error => {


      console.error( error );


    } );


</script>

در پروژه‌های ASP.NET، معمولا این کد در صفحات Razor یا فایل‌های View قرار می‌گیرد.
سوم: افزودن قابلیت‌های Block و سفارشی‌سازی CKEditor 5
یکی از قابلیت‌های مهم CKEditor 5، پشتیبانی از Block Elements است که امکان قالب‌بندی متن به صورت بلوک‌های جداگانه را فراهم می‌آورد. برای فعال‌سازی این ویژگی، باید پلاگین‌های مربوطه را اضافه کرد یا نسخه‌ای از CKEditor 5 که این قابلیت را دارد، استفاده کرد.
همچنین، می‌توان از پلاگین‌های سفارشی برای افزودن ابزارهای جدید، تغییر در رابط کاربری، یا تنظیمات خاص استفاده کرد. برای مثال، افزودن دکمه‌های جدید در نوار ابزار، تنظیم قالب‌های خاص، و یا افزودن قابلیت‌های syntax highlighting، از جمله... ← ادامه مطلب در magicfile.ir