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


در دنیای امروز، توسعه وب‌سایت‌ها و برنامه‌های تحت وب، نیازمند ابزارهای قدرتمند و انعطاف‌پذیر برای ویرایش محتوا است. یکی از این ابزارهای محبوب، CKEditor 5 است که امکانات بی‌نظیری در ویرایشگر متن فراهم می‌کند. در کنار آن، Highlight.js نیز برای برجسته‌سازی کدهای برنامه‌نویسی و نمایش بهتر آنها، بسیار کاربردی است. در این مقاله، به صورت جامع و کامل، نحوه استفاده، پیاده‌سازی و ادغام این دو ابزار در فرم‌های وب ASP.NET را بررسی می‌کنیم، و در انتها، نمونه سورس کد کامل و قابل استفاده را ارائه می‌دهیم.
معرفی CKEditor 5 و Highlight.js
CKEditor 5 یک ویرایشگر متن پیشرفته است که با طراحی مدرن، قابلیت‌های گسترده‌ای مانند ویرایش متن به صورت WYSIWYG، افزودن جداول، تصاویر، لینک‌ها و دیگر عناصر، را فراهم می‌آورد. این ویرایشگر، به صورت ماژولار و قابل توسعه است، و می‌توان آن را در پروژه‌های ASP.NET به راحتی ادغام کرد. از طرف دیگر، Highlight.js یک کتابخانه جاوااسکریپتی است که برای برجسته‌سازی سینتکس کدهای برنامه‌نویسی در صفحات وب طراحی شده است. این کتابخانه، از بسیاری زبان برنامه‌نویسی پشتیبانی می‌کند و با رنگ‌بندی جذاب، نمایش کدها را بسیار خوانا و زیبا می‌کند.
چرا باید CKEditor 5 و Highlight.js را در پروژه ASP.NET استفاده کنیم؟
در بسیاری از پروژه‌های وب، نیاز است که کاربران بتوانند محتواهای غنی و قابل تنظیم را وارد کنند. برای مثال، در سیستم‌های مدیریت محتوا، صفحات وب، وبلاگ‌ها، و یا بخش‌های آموزشی، ویرایشگر متن باید امکانات گسترده‌ای را در اختیار کاربران قرار دهد. CKEditor 5 این نیاز را برآورده می‌کند، زیرا قابلیت‌های متنوعی دارد و به راحتی قابل تنظیم است. در کنار آن، زمانی که کاربر نیاز دارد کدهای برنامه‌نویسی خود را وارد کند، برجسته‌سازی سینتکس، خوانایی و فهم کد را بسیار آسان‌تر می‌کند، و اینجاست که Highlight.js وارد میدان می‌شود.
نحوه ادغام CKEditor 5 در پروژه ASP.NET
برای شروع، باید فایل‌های مربوط به CKEditor 5 را در پروژه ASP.NET خود وارد کنید. معمولا، این کار با افزودن لینک‌های CDN در بخش `<head>` صفحه انجام می‌شود، یا با دانلود فایل‌ها و قرار دادن آنها در پروژه. پس از افزودن فایل‌های لازم، یک عنصر `<textarea>` یا `<div>` برای جایگذاری ویرایشگر تعریف می‌کنید. سپس، با استفاده از جاوااسکریپت، CKEditor را روی این عنصر بارگذاری می‌کنید.
مثلاً، کد پایه برای راه‌اندازی CKEditor 5 چنین است:
html  


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


<div id="editor"></div>


<script>


    ClassicEditor  


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


        .catch( error => {


            console.error( error );


        } );


</script>

در این نمونه، یک ویرایشگر کلاسیک ساخته می‌شود. حال، اگر بخواهید قابلیت‌های خاص، مانند کد بلاک یا افزودن ابزارهای دیگر، را فعال کنید، باید از پلاگین‌های مخصوص CKEditor 5 استفاده کنید یا تنظیمات مربوطه را انجام دهید.
استفاده از کد بلاک در CKEditor 5
در نسخه‌های جدید CKEditor 5، قابلیت پشتیبانی از بلاک‌های کد به صورت پیش‌فرض وجود دارد، اما برای بهبود و شخصی‌سازی، می‌توانید پلاگین‌های مربوط به کد را فعال کنید. این پلاگین‌ها، امکان وارد کردن کدهای برنامه‌نویسی در قالب بلاک را فراهم می‌کنند و با رنگ‌بندی سینتکس، نمایش کد را بهبود می‌بخشند.
برای فعال‌سازی این قابلیت، باید پلاگین‌های مربوطه را به پروژه اضافه کنید، و تنظیمات مناسب را انجام دهید. به عنوان مثال، در فایل پیکربندی CKEditor، باید پلاگین `CodeBlock` را فعال کنید:
javascript  


ClassicEditor  


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


        plugins: [ /* پلاگین‌های مورد نیاز */ , 'CodeBlock' ],


        toolbar: [ 'heading', '|', 'bold', 'italic', '|', 'codeBlock' ]


    } )


    .catch( error => {


        console.error( error );


    } );

این کار، امکان وارد کردن کدهای برنامه‌نویسی در قالب بلاک، همراه با رنگ‌بندی سینتکس، را فراهم می‌کند.
ادغام Highlight.js برای برجسته‌سازی کدهای وارد شده
در حالت کلی، CKEditor 5 خود قابلیت برجسته‌سازی سینتکس را ندارد، اما با ادغام Highlight.js، می‌توان این قابلیت را به صورت مؤثر اضافه کرد. بعد از اینکه کاربر کد خود را در بلاک‌های مربوط وارد کرد، باید کد را به صورت HTML خروجی بگیرید و سپس از Highlight.js برای رنگ‌بندی و نمایش بهتر آن استفاده کنید.
مراحل کلی به این صورت است:
  1. پس از ذخیره یا بارگذاری محتوا، بخش‌هایی که شامل کد هستند را شناسایی کنید.

  1. با استفاده از تابع `hljs.highlightBlock()`، این بخش‌ها را برجسته کنید.

  1. باید این عملیات هر بار که محتوا تغییر می‌کند یا صفحه بارگذاری می‌شود، انجام گیرد.
    مثال، کد جاوااسکریپتی برای فعال‌سازی Highlight.js:
    html

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/
  1. 7.0/styles/default.min.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/
  1. 7.0/highlight.min.js"></script>

<script>

document.addEventListener('DOMContentLoaded', (event) => {

document.querySelectorAll('pre code').forEach((block) => {

hljs.highlightBlock(block);

});

});

</script>


در این حالت، هر کد موجود در تگ `<pre><code>`، به صورت خودکار رنگ‌بندی می‌شود. بنابراین، باید در هنگام ذخیره و نمایش محتوا، کده... ← ادامه مطلب در magicfile.ir