استخدام محرر TinyMCE في WordPress [الدليل]

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

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

إضافة الأزرار المتاحة

يستخدم WordPress بعض الخيارات المتاحة في TinyMCE لتعطيل أزرار معينة - مثل الحروف العلوية والسفلية والقواعد الأفقية - من أجل تنظيف الواجهة. يمكن إضافتها مرة أخرى دون ضجة كبيرة.

الخطوة الأولى هي إنشاء مكون إضافي. ألقِ نظرة على مخطوطة WordPress حول كيفية القيام بذلك. باختصار ، يمكنك الحصول على إنشاء مجلد باسم "my-mce-plugin" في مجلد wp-content / plugins. قم بإنشاء ملف بنفس الاسم ، بامتداد PHP: بلدي MCE-plugin.php.

داخل هذا الملف ، قم بلصق التالي:

  
بمجرد الانتهاء من ذلك ، يجب أن تكون قادرًا على تحديد هذا المكون الإضافي في WordPress وتنشيطه. يمكن لصق جميع الشفرات من الآن فصاعدًا داخل هذا الملف.
 
لذلك ، العودة إلى تمكين بعض الأزرار المضمنة ولكن المخفية. إليك الرمز الذي يسمح لنا بتمكين الأزرار الثلاثة التي ذكرتها:
 
 add_filter ('mce_buttons_2'، 'my_tinymce_buttons')؛ وظيفة my_tinymce_buttons (أزرار $) $ buttons [] = 'مرتفع'؛ أزرار $ [] = 'منخفض' ؛ أزرار $ [] = ساعة ؛ عودة أزرار $.  
 
 
 
لمعرفة الأزرار التي يمكن إضافتها وما يطلق عليها ، ألقِ نظرة على القائمة الموجودة في وثائق TinyMCE لعناصر التحكم.
 
إنشاء الأزرار الخاصة بنا
 
ماذا عن إنشاء أزرار خاصة بنا من الصفر؟ تستخدم العديد من مواقع الويب Prism لتمييز الكود الذي يستخدم منهجًا دلاليًا جدًا لترميز مقاطع الكود. يجب عليك لف الكود الخاص بك في الداخل  و 
 العلامات ، شيء مثل هذا:
 
متغير $ = 'قيمة'
 
دعونا إنشاء زر الذي سوف نفعل هذا بالنسبة لنا!
 
هذه عملية من ثلاث خطوات. ستحتاج إلى إضافة زر ، وتحميل ملف جافا سكريبت وكتابة محتوى ملف Javascript بالفعل. هيا بنا نبدأ!
 
تعد إضافة الزر وتحميل ملف Javascript أمرًا سهلاً للغاية ، إليك الرمز الذي استخدمته لإنجازه:
 
 add_filter ('mce_buttons'، 'pre_code_add_button')؛ function pre_code_add_button (أزرار $) $ buttons [] = 'pre_code_button'؛ عودة أزرار $.  add_filter ('mce_external_plugins'، 'pre_code_add_javascript')؛ function pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). "/tinymce-plugin.js '؛ إرجاع $ plugin_array ؛  
 
عندما أرى دروسًا حول هذا ، فأنا أرى مشكلتين كثيرًا.
 
إنهم يهملون ذكر ذلك يجب أن يكون اسم الزر المُضاف في دالة pre_code_add_button () هو نفسه مفتاح المتغير $ plugin_array في دالة pre_code_add_javascript (). سنحتاج أيضا إلى استخدام نفس السلسلة في جافا سكريبت لدينا لاحقا.
 
بعض الدروس أيضا استخدام ربط admin_head إضافي لرفع كل شيء. على الرغم من أن هذا سيعمل ، إلا أنه غير مطلوب وبما أن الدستور الغذائي لا يستخدمه ، فمن المحتمل تجنبه.
 
والخطوة التالية هي كتابة بعض Javascript لتنفيذ وظائفنا. إليك ما اعتدت أن أحصل عليه 
 و  علامات الإخراج في وقت واحد.
 
 (function () tinymce.PluginManager.add ('pre_code_button'، function (editor، url) editor.addButton ('pre_code_button'، text: 'Prism'، icon: false، onclick: function () var select = tinyMCE.activeEditor.selection.getContent () ؛ var content = '
"+ تحديد +"
'؛ editor.insertContent (content + "\ n")؛ ) ؛ )؛ ) ()؛ 
 
تملي معظم ذلك على كيفية ترميز المكون الإضافي TinyMCE ، يمكنك العثور على بعض المعلومات حول ذلك في وثائق TinyMCE. في الوقت الحالي ، كل ما تحتاج إلى معرفته هو ذلك اسم الزر الخاص بك (pre_code_button) يجب أن تستخدم في السطر 2 و 3. سيتم عرض قيمة "النص" في السطر 4 إذا لم تستخدم رمزًا (سنلقي نظرة على إضافة الرموز في لحظة).
 
تحدد طريقة onclick ما يفعله هذا الزر عند النقر فوقه. أريد استخدامه للالتفاف على النص المحدد داخل بنية HTML التي تمت مناقشتها سابقًا.
 
يمكن انتزاع النص المحدد باستخدام tinyMCE.activeEditor.selection.getContent (). بعد ذلك ، أقوم بلف العناصر الموجودة حوله وأدخله ، واستبدل المحتوى المميز بالعنصر الجديد. لقد أضفت أيضًا سطرًا جديدًا حتى أتمكن من البدء بالكتابة بسهولة بعد عنصر الشفرة.
 
إذا كنت ترغب في استخدام رمز ، أقترح اختيار واحد من مجموعة Dashicons التي تأتي مع WordPress. يحتوي Developer Developer على أداة رائعة للعثور على الرموز و CSS / HTML / Glyph الخاصة بهم. ابحث عن رمز الكود ولاحظ الكود الموحد تحته: f475.
 
سنحتاج إلى إرفاق ورقة أنماط بالملحق الإضافي الخاص بنا ثم إضافة نمط بسيط لعرض الأيقونة الخاصة بنا. أولاً ، دعنا نضيف أسلوبنا إلى WordPress:
 
 add_action ('admin_enqueue_scripts'، 'pre_code_styles')؛ function pre_code_styles () wp_enqueue_style ('pre_code_button'، plugins_url ('/style.css'، __FILE__))؛  
 
ارجع إلى Javascript وبجانب الرمز في وظيفة addButton ، استبدل “خاطئة” مع الفصل الذي تريد أن يكون الزر الخاص بك - اعتدت pre_code_button.
 
الآن قم بإنشاء ملف style.css في دليل البرنامج المساعد الخاص بك وإضافة CSS التالي:
 
 i.mce-i-pre_code_button: قبل font-family: dashicons؛ المحتوى: "\ f475" ؛  
 
 
 
لاحظ أن الزر سيتلقى mce-i- [صفك هنا] الفئة التي يمكنك استخدامها لاستهداف وإضافة أنماط. حدد الخط كـ dashicons والمحتوى باستخدام قيمة unicode من الأقدم.
 
باستخدام TinyMCE في مكان آخر
 
غالبًا ما تنشئ الإضافات textareas لإدخال نص أطول, لن يكون رائعا لو استطعنا استخدام TinyMCE هناك كذلك؟ بالطبع يمكننا ذلك ، وهو سهل للغاية. تتيح لنا وظيفة wp_editor () إخراج واحدة في أي مكان في المشرف ، وإليك كيفية ظهورها:
 
wp_editor ($ initial_content ، $ element_id ، $ settings) ؛
 
تقوم المعلمة الأولى بتعيين المحتوى الأولي للمربع. يمكن استخدام هذا لتحميل خيار من قاعدة البيانات ، على سبيل المثال. تقوم المعلمة الثانية بتعيين معرف عنصر HTML. المعلمة الثالثة هي مجموعة من الإعدادات. لقراءة الإعدادات الدقيقة التي يمكنك استخدامها ، ألق نظرة على وثائق محرر wp.
 
الإعداد الأكثر أهمية هو textarea_name. يقوم هذا بملء سمة الاسم لعنصر textarea ، مما يسمح لك بحفظ البيانات بسهولة. إليك كيفية ظهور المحرر عند استخدامه في صفحة الخيارات:
 
$ settings = array ('textarea_name' => 'buyer_bio') ؛
 
wp_editor (get_option ('buyer_bio') ، 'buyer_bio' ، $ settings) ؛
 
هذا يكافئ كتابة التعليمات البرمجية التالية ، والتي من شأنها أن تؤدي إلى textarea بسيط:
 
<?php get_option( 'buyer_bio' ) ?>
 
استنتاج
 
يعد محرر TinyMCE وسيلة سهلة الاستخدام للسماح للمستخدمين بمزيد من المرونة عند إدخال المحتوى. يسمح لأولئك الذين لا يرغبون في تنسيق محتواهم فقط بكتابته والقيام به ، وأولئك الذين يريدون العبث به لقضاء الكثير من الوقت الذي يحتاجون إليه..
 
يمكن إنشاء أزرار ووظائف جديدة بطريقة معيارية للغاية ، وقد خدشنا سطح الاحتمالات فقط. إذا كنت على دراية ببرنامج TinyMCE المساعد أو حالة الاستخدام الجيدة التي ساعدتني كثيرًا ، فيرجى إخبارنا في التعليقات أدناه!