تثبيت وتكوين Ckeditor. تثبيت المحرر المرئي CKEditor

CKEditor هو محرر نصوص HTML جاهز للاستخدام مصمم لتبسيط إنشاء محتوى صفحة الويب. هذا هو محرر WYSIWYG الذي يوفر وظائف تحرير النص مباشرة إلى صفحات الويب الخاصة بك.

CKEditor هو تطبيق مفتوح المصدر، مما يعني أنه يمكن تعديله كما يحلو لك. تأتي فائدتها من مجتمع نشط لا يتوقف أبدًا عن تطوير التطبيقات بإضافات مجانية وعملية تطوير شفافة.

3-تحميل CKEditor

لديك 4 خيارات لتنزيل CKEditor.

تنزيل النتيجة:

يمكنك مشاهدة أمثلة لـ CKEditor في المجلد عينات:

4- أمثلة أساسية:

كافة الأمثلة على هذه المقالة موجودة في المجلد عيناتفي CKEditor الذي قمت بتنزيله. لكن سأحاول تسهيل الأمر حتى يكون أسهل بالنسبة لك.

قم بإنشاء مجلد com.myexamples، الأمثلة الموجودة في هذه المقالة ستكون موجودة في هذا المجلد.

4.1- استبدال عناصر منطقة النص باستخدام JavaScript

مثال بسيط هو استخدام CKEditor.replace(..) للاستبدال عبر CKEditor .

استبدالbycode.html

استبدال Textarea بالكود استبدال عناصر Textarea باستخدام كود JavaScript

مرحبًا محرر CK

CKEDITOR.replace("editor1");

انظر المثال:

نتائج تشغيل المثال:

4.2- استبدال عناصر منطقة النص بفئة الاسم

مع وجود السمة اسم،وسيتم استبدال الفئة ="ckeditor" تلقائيًا بـ CKEditor.

نص

استبدال بواسطةclass.html

استبدال Textareas باسم الفئة استبدال عناصر Textarea باسم الفئة

مرحبًا محرر CK

تشغيل المثال:

4.3- إنشاء CKEditor باستخدام jQuery

مثال على إنشاء CKEditor باستخدام JQuery.

محول jQuery - نموذج CKEditor $(document).ready(function() ( $("#editor1").ckeditor(); )); الدالة setValue() ( $("#editor1").val($("input#val").val()); ) إنشاء المحررين باستخدام jQuery

مرحبًا محرر CK

كما ترون، يتم تعيين التكوينات بواسطة كائن JavaScript بسيط تم تمريره إلى طريقة create().

إزالة الميزات

تأتي الإصدارات مع كافة الميزات المضمنة في حزمة التوزيع التي يتم تمكينها افتراضيًا. يتم تعريفها على أنها مكونات إضافية لـ CKEditor.

في بعض الحالات، قد تحتاج إلى إعدادات محرر مختلفة في تطبيقك، وكلها تعتمد على نفس البنية. ولهذا الغرض، تحتاج إلى التحكم في المكونات الإضافية المتوفرة في المحرر في وقت التشغيل.

في المثال أدناه، تمت إزالة المكونات الإضافية للعنوان والرابط:

// قم بإزالة بعض المكونات الإضافية من الإعداد الافتراضي. ClassicEditor .create(document .querySelector("#editor" ), ( RemovePlugins : [ "Heading" , "Link" ], شريط الأدوات: [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(error => ( console .log(error); ));

كن حذرًا عند إزالة المكونات الإضافية من إصدارات CKEditor باستخدام config.removePlugins. إذا كانت المكونات الإضافية التي تمت إزالتها توفر أزرار شريط الأدوات، فسيصبح تكوين شريط الأدوات الافتراضي المضمن في الإصدار غير صالح. في مثل هذه الحالة، يتعين عليك توفير تكوين شريط الأدوات المحدث كما في المثال أعلاه.

قائمة الإضافات

يحتوي كل إصدار على عدد من المكونات الإضافية المتاحة. يمكنك بسهولة إدراج جميع المكونات الإضافية المتوفرة في الإصدار الخاص بك:

ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName);

إضافة ميزات إضافة ميزات معقدة

نظرًا لأن إصدارات CKEditor لا تتضمن جميع الميزات الممكنة، فإن الطريقة الوحيدة لإضافة المزيد من الميزات إليها هي إنشاء إصدار مخصص.

إضافة ميزات بسيطة (مستقلة).

هناك استثناء لكل قاعدة. على الرغم من أنه من المستحيل إضافة مكونات إضافية لها تبعيات إلى @ckeditor/ckeditor5-core أو @ckeditor/ckeditor5-engine (التي تتضمن جميع المكونات الإضافية الرسمية الموجودة تقريبًا) دون إعادة بناء الإصدار، إلا أنه لا يزال من الممكن إضافة مكونات إضافية بسيطة وخالية من التبعية .

استيراد ClassicEditor من "@ckeditor/ckeditor5-build-classic" ؛ function MyUploadAdapterPlugin ( Editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( Loader ) ( // ... ); ) // قم بتحميل محول التحميل المخصص كمكون إضافي للمحرر. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); إعداد شريط الأدوات

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

قد يكون لكل محرر نظام مختلف لتكوين شريط الأدوات، لذا يوصى بالتحقق من وثائقه. على أية حال، المثال التالي قد يعطيك فكرة عامة:

ClassicEditor .create(document .querySelector("#editor" ), ( شريط الأدوات : [ "bold" , "italic" , "link" ] )) .catch(error => ( console .log(error); ));

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

سرد العناصر المتاحة

يمكنك استخدام المقتطف التالي لاسترداد كافة عناصر شريط الأدوات المتوفرة في المحرر الخاص بك:

Array .from(editor.ui.componentFactory.names());