تشريح محرر وورد بريس TinyMCE

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

ووردبريس TinyMCE

TinyMCE هو محرر WYSIWYG قائم على المستعرض ومكتوب بلغة JavaScript وتم إصداره كبرنامج مفتوح المصدر تحت LGPL

محرر وورد بريس TinyMCE

تحديث : وورد بريس 5.0 سيغير الطريقة التي نكتب بها المحتوى وننشره. تأكد من إلقاء نظرة على دليلنا:  ما الجديد في وورد بريس 5.0 (كيفية الاستعداد لـ Gutenberg)

بشكل افتراضي ، يوفر وورد بريس  محرر TinyMCE صفين من الأزرار لإنشاء محتوى المنشور وتحريره وتنسيقه. يتضمن الصف الأول (شريط الأدوات الأساسي) وظائف التصميم والتنسيق. تسمح عناصر التحكم الإضافية بإضافة وتحرير وإزالة المراسي وإضافة علامة <! – more–> وتنشيط وضع عدم التشتيت. يجب أن تبدو كل هذه الأزرار مألوفة جدًا لأي شخص لديه معرفة أساسية بمعالج الكلمات.

يبدل زر تبديل شريط الأدوات شريط أدوات المحرر المتقدم (الصف الثاني من الأزرار) ، والذي يوفر قائمة منسدلة لعناصر النص (الفقرة والعناوين والنص المنسق مسبقًا) والمزيد من عناصر التحكم في التصميم وبعض الميزات الإضافية (لصق كنص ، مسح التنسيق ، الشخصيات الخاصة ، التراجع والإعادة) التي تأتي في متناول اليد من نواح كثيرة.

الشخصيات الخاصة

يسمح جدول الأحرف الخاصة للمستخدمين بإضافة كيانات HTML بسرعة

أخيرًا ، يوفر زر علامة الاستفهام قائمة باختصارات لوحة المفاتيح التي تعمل على تحسين تجربة الكتابة لدى المستخدم.

الاختصارات

لوحة اختصارات TinyMCE

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

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

وإذا لم تكن كل هذه الأزرار كافية ، فيمكننا تحسين المحرر بوظائفك الرائعة ، من خلال تطوير مكونات إضافية مخصصة.

ومع ذلك ، فلنبدأ في الغوص من الاستخدام الأسهل والأكثر شيوعًا لواجهة برمجة التطبيقات.

إضافة أنماط مخصصة لمحرر وورد بريس TinyMCE

افترض أنك بحاجة إلى توفير طريقة سهلة لإضافة أنماط مخصصة إلى محتوى المنشور من TinyMCE. إنه إجراء من خطوتين:

أولاً ، نحتاج إلى تنشيط قائمة منسدلة مخفية تسمى Styleselect ،

ثم يتعين علينا تحديد كل نمط نريد إضافته إلى قائمة Styleselect.

يمكننا إنجاز المهمة الأولى عن طريق تصفية مجموعة أزرار TinyMCE. يعرض شريط الأدوات الافتراضي صفًا أو صفين من الأزرار ، ولكن يمكننا تمكين ما يصل إلى أربعة صفوف في شريط الأدوات بفضل عوامل التصفية التالية :

يقوم mce_buttons بتصفية أزرار شريط الأدوات الأساسية (الصف الأول) ، والتي تكون مرئية دائمًا ؛

يقوم mce_buttons_2 بتصفية أزرار شريط الأدوات المتقدمة (الصف الثاني) ، والتي يمكن للمستخدم تشغيل / إيقاف تشغيلها ؛

mce_buttons_3 غير نشط افتراضيًا ؛

mce_buttons_4 غير نشط بشكل افتراضي.

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

function my_mce_buttons_2( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

و array_unshift وظيفة PHP بإلحاق على styleselect عنصر إلى الجزء الأمامي من أزرار $ مجموعة.

اختيار الأنماط

ستعرض القائمة المنسدلة Format قائمة بجميع أنماط CSS المتاحة

الآن وقد تم تنشيط الزر ، يمكننا تسجيل أنماطنا المخصصة عن طريق تصفية مجموعة من معلمات تكوين TinyMCE من خلال مرشح tiny_mce_before_init .

ضع في اعتبارك الوظيفة التالية:

function my_tiny_mce_before_init( $mceInit ) {
	$style_formats = array(
		array(
			'title' => 'PHP',
			'block' => 'code',
			'classes' => 'language-php'
		)	
	);
	$mceInit['style_formats'] = json_encode( $style_formats );	
	return $mceInit;    
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

و style_formats العنصر هو JSON المشفرة مجموعة من العناصر. يقوم كل عنصر بتعيين معلمات التكوين لعنصر قائمة واحد. تستبدل الوظيفة أعلاه الأنماط الافتراضية بعنصر مخصص واحد يلتف على النص المحدد في عنصر code.language-php .

تنسيقات النمط

تحتوي القائمة المنسدلة Styleselect على عنصر مخصص واحد

في مثالنا ، قمنا بتعيين ثلاث خصائص لعنصر قائمة واحد:

العنوان : عنوان عنصر القائمة ؛

الكتلة : عنصر الكتلة المراد إنتاجه ؛

الفئات : قائمة مفصولة بمسافات لفئات CSS لتطبيقها على الاختيار.

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

يمكننا إضافة المزيد من العناصر وتجميعها حسب الفئة ، كما هو موضح في المثال التالي:

function my_tiny_mce_before_init( $mceInit ) {
	$style_formats = array(
		array(
			'title' => 'Code language',
			'items' => array(
				array(
					'title' => 'PHP',
					'block' => 'code',
					'classes' => 'language-php'
				),
				array(
					'title' => 'CSS',
					'block' => 'code',
					'classes' => 'language-css'
				),
				array(
					'title' => 'HTML',
					'block' => 'code',
					'classes' => 'language-html'
				)
			)
		)	
	);

	$mceInit['style_formats'] = json_encode( $style_formats );
	
	return $mceInit;    
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

و style_formats العنصر مجموعة متعددة dimentional من المعلمات. في هذا المثال ، أضفنا عنصر المستوى الأول (لغة الكود) وثلاثة عناصر فرعية (PHP ، CSS ، HTML). تظهر الصورة أدناه القائمة الناتجة.

تنسيقات نمط متقدمة

يمكننا تجميع عناصر القائمة وتقليل حجم القائمة على الشاشة

تقوم TinyMCE بتطبيق الأنماط على العناصر المحددة ، ولكنها ليست على دراية بهذه الأنماط ، لذلك لن يتم تطبيقها على المحتوى في المحرر. إذا كانت هناك حاجة إلى معاينة في الوقت الفعلي ، فسيتعين علينا تسجيل ورقة أنماط مخصصة باستخدام الوظيفة add_editor_style () :

/**
 * Registers an editor stylesheet for a custom theme.
 */
function my_theme_add_editor_styles() {
	add_editor_style( 'css/my-editor-style.css' );
}
add_action( 'admin_init', 'my_theme_add_editor_styles' );

تسجل هذه الوظيفة ورقة الأنماط التي سيتم استخدامها بواسطة وورد بريس TinyMCE لتصميم المحتوى في المحرر.

كمثال ، لنفترض أننا نرغب في تطبيق ألوان مختلفة على كود PHP و CSS و HTML. لإنجاز هذه المهمة ، سنضيف التصريحات التالية إلى ورقة أنماط css / my-editor-style.css :

.language-php{ color: red; }
.language-css{ color: green; }
.language-html{ color: blue; }

سينتج TinyMCE الناتج الموضح في الصورة التالية.

إضافة أنماط المحرر

ملاحظة: لقد نظرنا في عدد قليل فقط من إعدادات التكوين ، ولكن TinyMCE API تمنح المطورين تحكمًا كبيرًا في المحرر. راجع وثائق TinyMCE للحصول على قائمة كاملة بالعناصر والخصائص مع بعض أمثلة الاستخدام.

تمكين أزرار وورد بريس TinyMCE المخفية

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

أحد هذه الأزرار هو القائمة المنسدلة Styleselect ، ولكن لدينا قائمة طويلة من الأزرار غير النشطة التي يمكننا تنشيطها عن طريق تصفية صفيفات الأزرار من خلال أحد مرشحات mce_buttons_ {n} (راجع مستندات TinyMCE للحصول على القائمة الكاملة للأزرار المتاحة ).

ضع في اعتبارك المثال التالي:

function my_mce_buttons_3( $buttons ) {	
	$buttons[] = 'superscript';
	$buttons[] = 'subscript';
	return $buttons;
}
add_filter( 'mce_buttons_3', 'my_mce_buttons_3' );

وظيفة رد فوق يضيف مرتفع و منخفض العناصر إلى نهاية مجموعة أزرار $ .

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

تُظهر الصورة زرين إضافيين مضافين إلى الصف الثالث من شريط أدوات TinyMCE

تُظهر الصورة زرين إضافيين مضافين إلى الصف الثالث من شريط أدوات TinyMCE

فيما يلي قائمة بالأزرار المخفية المتوفرة في وورد بريس TinyMCE:

يقطع

ينسخ

معجون

ساعة

الصيغ حدد

الخطوط حدد

الخطوطحدد

اختيار الأنماط

منخفض ( فرعي سابقًا )

مرتفع ( sup سابقًا )

اللون الخلفي

مستند جديد

شريط أدوات TinyMCE

تُظهر الصورة شريط أدوات TinyMCE ممتلئًا بجميع الأزرار المتاحة

إذا لم يناسب أي من هذه الأزرار احتياجاتنا ، فيمكننا تزويد المحرر بمزيد من الوظائف ، وذلك بفضل عدد كبير من المكونات الإضافية الرسمية.

تحسين المحرر المرئي باستخدام ملحقات TinyMCE

افترض أن هدفك هو تضمين زر جدول TinyMCE في المحرر المرئي من خلال مكون وورد بريس الإضافي.

أولاً ، يجب عليك تنزيل حزمة Dev من موقع TinyMCE . قم بفك ضغط ملف zip واحصل على ملف plugin.min.js من مجلد / js / tinymce / plugin / table .

قم بإنشاء المجلدات التالية في / wp-content / plugins :

/ wp-content / plugins / tinymce-example-plugin /

/ wp-content / plugins / tinymce-example-plugin / mce / table

عند الانتهاء ، قم بإنشاء ملف tinymce-example-plugin.php جديد في المجلد الجذر للمكون الإضافي ، وقم بتحميل ملف plugin.min.js في مجلد الجدول (انظر الصورة أدناه).

تُظهر الصورة بنية ملف البرنامج المساعد

تُظهر الصورة بنية ملف البرنامج المساعد

أضف الآن الأسطر التالية إلى tinymce-example-plugin.php :

<strong><?php</strong>
/**
 * @package TinyMCE_example_plugin
 * @version 1.0
 */
/*
Plugin Name: TinyMCE example plugin
Plugin URI: http://wordpress.org/extend/plugins/#
Description: This is an example plugin 
Author: Your Name
Version: 1.0
Author URI: http://yourdomain.com/
*/ 

لتضمين زر الجدول في محرر وورد بريس TinyMCE ، نحتاج فقط إلى

مرشحين : يضيف mce_buttons أزرارًا جديدة إلى شريط أدوات TinyMCE الأساسي (يمكننا استخدام أي من مرشحات mce_buttons_ {n} ، اعتمادًا على الصف الذي يجب عرض الزر فيه)

يقوم mce_external_plugins بتحميل ملحق TinyMCE خارجي.

هل تعاني من مشاكل التوقف و وورد بريس؟ Kinsta هو حل الاستضافة المصمم لتوفير الوقت! تحقق من ميزاتنا

ها هو كود ملف البرنامج المساعد:

function example_plugin_register_buttons( $buttons ) {
   $buttons[] = 'table';
	return $buttons;
}
// add new buttons
add_filter( 'mce_buttons', 'example_plugin_register_buttons' );

function example_plugin_register_plugin( $plugin_array ) {
   $plugin_array['table'] = plugins_url( '/mce/table/plugin.min.js', __FILE__ );
   return $plugin_array;
}
// Load the TinyMCE plugin
add_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );

تضيف الوظيفة الأولى زرًا جديدًا إلى شريط الأدوات الأساسي ، بينما تقوم الوظيفة الثانية بتحميل مكون إضافي من عنوان URL المحدد. و plugins_url () وظيفة استرداد URL المطلق إلى الملف المحدد تحت الدليل المساعد (اقرأ المزيد على الدستور ).

الآن يمكننا حفظ الملف وتفعيل البرنامج المساعد. توضح الصورة أدناه شريط الأدوات المحسن.

طاولة

هذا كل شئ. باتباع نفس الإجراء ، يمكننا إضافة أي ملحقات TinyMCE موجودة إلى محرر وورد بريس المرئي.

يمكنك تنزيل ملف .zip للمكون الإضافي ، أو عرض كود PHP لهذا المثال على Gist .

بناء ملحق TinyMCE

أخيرًا ، يمكننا بناء المكون الإضافي المخصص TinyMCE. افترض أنك تريد إضافة زر للسماح للمستخدمين بالتفاف المحتوى المحدد في العلامات التالية:

<pre><code>Selected text</code></pre>

يمكننا حتى أن نقرر إضافة فئة CSS إلى علامة <code> ، لتوفير الدعم لأداة تمييز كود Prism . نحن بحاجة إلى:

تسجيل زر TinyMCE مخصص ومكوِّن إضافي في مكون وورد بريس الإضافي ؛

تطوير البرنامج المساعد TinyMCE ؛

نحن نعلم بالفعل كيفية تسجيل مكون إضافي وإضافة زر في وورد بريس TinyMCE:

function example_plugin_register_buttons( $buttons ) {
	$buttons[] = 'prism';
	return $buttons;
}
// add new buttons
add_filter( 'mce_buttons', 'example_plugin_register_buttons' );

function example_plugin_register_plugin( $plugin_array ) {
	$plugin_array['prism'] = plugins_url( '/mce/prism/plugin.js', __FILE__ );
	return $plugin_array;
}
// Load the TinyMCE plugin
add_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );

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

لنقم الآن بإنشاء ملف plugin.js التالي :

(function() {
	var languages = ['css', 'php', 'html', 'javascript'];
	
	tinymce.PluginManager.add( 'prism', function( editor ){
		
		var items = [];

		tinymce.each( languages, function( languageName ){
			items.push({
				text: languageName,
				onclick: function(){
					var content = tinyMCE.activeEditor.selection.getContent();
					editor.insertContent( '<pre><code class="language-' + languageName + '">' + content + '</code></pre>' );
				}
			});
		});

		editor.addButton( 'prism', {
			type: 'menubutton',
			text: 'Prism',
			icon: 'code',
			menu: items
		});

	});
})();

هذا الرمز متاح أيضًا على Gist .

ليس من أهدافنا الغوص في TinyMCE APIs ، وستجد كل ما تحتاج إلى معرفته في مستندات TinyMCE للمطورين .

يجب وضع هذا الملف في / mce / prism / مجلد فرعي من دليل البرنامج المساعد الخاص بنا. تتكرر الدالة JS بين عناصر مصفوفة اللغات وتدفع كائنًا جديدًا إلى مصفوفة العناصر لكل لغة. ينشئ أسلوب addButton زر قائمة Prism ويضيف عنصر قائمة لكل عنصر من عناصر مصفوفة العناصر.

الحفظ والتحميل والتحديث ، وسوف يظهر زر القائمة المنسدلة الرائع الخاص بك بكل جماله.

زر قائمة المنشور

يمكن العثور على أي معلومات إضافية حول كيفية تطوير ملحقات TinyMCE في الوثائق عبر الإنترنت للمطورين .

البرنامج المساعد TinyMCE المتقدم لبرنامج وورد بريس

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

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

يوفر TinyMCE Advanced قائمة شاملة بإعدادات المحرر

من صفحة إعدادات المحرر يمكننا إضافة وإزالة وترتيب الأزرار على شريط أدوات TynyMCE

من الصفحة خيارات البرنامج المساعد يمكننا تمكين العديد من الميزات المتقدمة، مثل الجدول زر، و الخط الأسرة و حجم الخط القوائم، و مشاهدة كتل و تظهر الحروف غير مرئية الأزرار.

تتيح الخيارات الأخرى للمستخدمين تحديد المحرر الذي سيتأثر بالإعدادات الجديدة والمزيد.

من صفحة إعدادات المحرر يمكننا إضافة وإزالة وترتيب الأزرار على شريط أدوات TynyMCE

يوفر TinyMCE Advanced قائمة شاملة بإعدادات المحرر

الاستنتاجات

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

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

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