استخدام كود HTML المدمج مع CKEditor 5

تُعد CKEditor 5 واحدة من أشهر محررات النصوص في الوقت الحالي، ويستخدمها الكثير من المطورين لإنشاء محتوى ديناميكي ومتفاعل. ومع ذلك، قد تواجه أحيانًا بعض التحديات عند استخدام الميزات المتقدمة مثل تضمين HTML. في هذا المقال، سنتناول كيفية استخدام خاصية تضمين HTML مع CKEditor 5، وسنقدم حلولًا لمشاكل قد تواجهك أثناء الاستخدام.

ما هي CKEditor 5؟

تعتبر CKEditor 5 أداة قوية لتحرير النصوص، حيث تتيح للمستخدمين إضافة النصوص، الصور، والروابط بسهولة. تتميز بإمكانية تخصيصها بطرق متعددة، مما يجعلها خيارًا مفضلًا للعديد من المطورين. لكن، إذا كنت تعمل في بيئة مثل WordPress ومعتمدًا على PHP، قد تحتاج إلى إضافة ميزات معينة مثل تضمين HTML.

تضمين HTML – لماذا وكيف؟

تضمين HTML هو عملية تضمين كود HTML مباشر في محتوى النص، مما يتيح لك عرض محتويات مثل الجداول أو الرسوم البيانية أو حتى العناصر التفاعلية من مواقع خارجية كـ Tableau. هذا الأمر ضروري إذا كنت ترغب في عرض محتوى مُخصص أو ديناميكي للمستخدمين.

تهيئة CKEditor 5 لتضمين HTML

عند ضبط CKEditor 5، تأكد من إضافة المكونات اللازمة إلى الشريط العلوي، مثل htmlEmbed. على الرغم من أن المشكلة التي قد تواجهها هي عدم ظهور هذا الخيار، مما يستدعي بعض التعديلات في الكود.

const editors = {};
const uploadUrl = get_template_directory_uri() + "/panelControl/procesos/ck_upload.php";
const ruta = "publicaciones";
function MyCustomUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new MyUploadAdapter(loader, uploadUrl, ruta);
    };
}
function createEditor(selector) {
    const element = document.getElementById(selector);
    if (element) {
        ClassicEditor.create(element, {
            toolbar: {
                items: ['heading', '|', 'imageUpload', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'htmlEmbed', 'link', 'bulletedList', 'numberedList'],
                shouldNotGroupWhenFull: true
            },
            extraPlugins: [MyCustomUploadAdapterPlugin],
        })
        .then(editor => {
            editors[selector] = editor;
        })
        .catch(error => {
            console.error('Error initializing CKEditor:', error);
        });
    }
}

حلول لمشاكل تضمين HTML

إذا لم يظهر خيار htmlEmbed، قد يكون الخطأ نتيجة فقدان ملحقات معينة. تأكد من أن الملحقات المطلوبة مثبتة ومفعلة. يمكنك القيام بذلك عبر تعديل الكود أو إعادة تحميل CKEditor مع الخيارات المناسبة.

كما قد تحتاج إلى استخدام دوال مثل wp_kses للسماح لكود HTML بالمرور عبر نظام WordPress. يجب عليك تعريف عناصر HTML المسموح بها في مصفوفة، كما هو موضح في المثال أدناه:

$allowed_html = array(
    'iframe' => array(
        'width' => array(),
        'height' => array(),
        'src' => array(),
        'frameborder' => array(),
        // المزيد من العناصر كما تحتاج
    ),
    // المزيد من العناصر كما تحتاج
);
$descripcion = wp_kses($descripcion, $allowed_html);

الختام

في نهاية المقال، يعتبر استخدام CKEditor 5 لتضمين HTML أداة قوية ومفيدة، لكن قد يتطلب الأمر بعض المعرفة الفنية والتعديلات البرمجية لضمان عمله بشكل مثالي. عبر اتباع الخطوات المذكورة أعلاه، يمكنك تجاوز العقبات الشائعة والاستمتاع بخصائص تضمين HTML في مشاريعك.

تذكر دائمًا أن الكفاءة في العمل تعتمد على المستويات المختلفة من التخصيص، لذا استخدم الخيارات المتاحة في CKEditor 5 لتلبية احتياجات موقعك أو تطبيقك.