ใช้ตัวแก้ไข TinyMCE ใน WordPress [Guide]

แม้ว่าพวกเขาอาจจะไม่รู้ชื่อของมัน แต่ทุกคนที่ใช้ WordPress ก็คุ้นเคยกับ เครื่องมือแก้ไข TinyMCE. มันเป็นเครื่องมือแก้ไขที่คุณใช้เมื่อคุณสร้างหรือแก้ไขเนื้อหาของคุณ - ปุ่มที่มีปุ่มสำหรับสร้างข้อความตัวหนาส่วนหัวการจัดแนวข้อความเป็นต้น นั่นคือสิ่งที่เราจะดูในโพสต์นี้และฉันจะแสดงให้คุณเห็น วิธีเพิ่มฟังก์ชันการทำงาน และ วิธีที่คุณสามารถใช้มันในปลั๊กอินของคุณ.

ตัวแก้ไขถูกสร้างขึ้นบนระบบ Javascript ที่ไม่ขึ้นอยู่กับแพลตฟอร์มชื่อ TinyMCE ซึ่งใช้ในโครงการหลายโครงการบนเว็บ มันมี API ที่ยอดเยี่ยมที่ WordPress ช่วยให้คุณสามารถแตะเพื่อสร้างปุ่มของคุณเองและเพิ่มไปยังตำแหน่งอื่น ๆ ภายใน WordPress.

การเพิ่มปุ่มที่มี

WordPress ใช้ตัวเลือกบางอย่างที่มีอยู่ใน TinyMCE เพื่อปิดการใช้งานปุ่มเฉพาะ - เช่นตัวยก, ตัวห้อยและกฎแนวนอน - เพื่อทำความสะอาดส่วนต่อประสาน พวกเขาสามารถเพิ่มกลับมาได้โดยไม่ต้องยุ่งยากมากเกินไป.

ขั้นตอนแรกคือการสร้างปลั๊กอิน ดู codex ของ WordPress เกี่ยวกับวิธีการทำเช่นนั้น สั้นคุณสามารถได้รับโดยการสร้างโฟลเดอร์ชื่อ 'my-mce-plugin' ในโฟลเดอร์ wp-content / plugins สร้างไฟล์ที่มีชื่อเดียวกันโดยใช้นามสกุล PHP: ฉัน-MCE-plugin.php.

ภายในไฟล์นั้นวางสิ่งต่อไปนี้:

  
เมื่อเสร็จแล้วคุณควรจะสามารถเลือกปลั๊กอินนี้ใน WordPress และเปิดใช้งานได้ รหัสทั้งหมดต่อจากนี้สามารถวางในไฟล์นี้.
 
ดังนั้นกลับไปที่ เปิดใช้งานปุ่มบางอย่างในตัว แต่ซ่อนอยู่. นี่คือรหัสที่ช่วยให้เราสามารถเปิดใช้งาน 3 ปุ่มที่ฉันพูดถึง:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); ฟังก์ชัน my_tinymce_buttons (ปุ่ม $) $ buttons [] = 'ตัวยก'; $ buttons [] = 'ตัวห้อย'; $ buttons [] = ชม; ส่งคืนปุ่ม $;  
 
 
 
หากต้องการทราบว่าสามารถเพิ่มปุ่มใดและปุ่มใดบ้างให้ดูรายการที่พบในเอกสารประกอบ TinyMCE สำหรับการควบคุม.
 
สร้างปุ่มของเราเอง
 
วิธีการเกี่ยวกับการสร้างปุ่มของเราเองจากศูนย์? เว็บไซต์จำนวนมากใช้ Prism สำหรับการเน้นโค้ดซึ่งใช้วิธีการทางความหมายในการทำเครื่องหมายส่วนรหัส คุณต้องห่อรหัสของคุณภายใน  และ 
 แท็กบางอย่างเช่นนี้:
 
$ variable = 'value'
 
มาสร้างปุ่มที่จะทำเพื่อเรา!
 
นี่เป็นกระบวนการสามขั้นตอน คุณจะต้องเพิ่มปุ่มโหลดไฟล์จาวาสคริปต์และเขียนเนื้อหาของไฟล์จาวาสคริปต์ มาเริ่มกันเลย!
 
การเพิ่มปุ่มและการโหลดไฟล์ Javascript นั้นค่อนข้างตรงไปตรงมานี่คือรหัสที่ฉันใช้เพื่อทำให้เสร็จ:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); ฟังก์ชั่น pre_code_add_button (ปุ่ม $) $ buttons [] = 'pre_code_button'; ส่งคืนปุ่ม $;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); ฟังก์ชั่น pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri () '/tinymce-plugin.js'; ส่งคืน $ plugin_array;  
 
เมื่อฉันเห็นบทเรียนเกี่ยวกับเรื่องนี้ฉันมักจะเห็นปัญหา 2 ข้อ.
 
พวกเขาละเลยที่จะพูดถึงว่า ชื่อปุ่มที่เพิ่มในฟังก์ชัน pre_code_add_button () ต้องเหมือนกับคีย์สำหรับตัวแปร $ plugin_array ในฟังก์ชัน pre_code_add_javascript (). เราก็จะต้อง ใช้สตริงเดียวกันใน Javascript ของเรา หลังจากนั้น.
 
บทเรียนบางอย่างยัง ใช้เบ็ด admin_head เพิ่มเติมเพื่อห่อทุกอย่าง. ในขณะนี้จะใช้งานได้มันไม่จำเป็นและเนื่องจาก Codex ไม่ได้ใช้มันจึงควรหลีกเลี่ยง.
 
ขั้นตอนต่อไปคือการเขียน Javascript เพื่อนำไปใช้กับการใช้งานของเรา นี่คือสิ่งที่ฉันเคยได้รับ 
 และ  แท็กส่งออกทั้งหมดในครั้งเดียว.
 
 (function () tinymce.PluginManager.add ('pre_code_button', ฟังก์ชัน (editor, url)) editor.addButton ('pre_code_button', text: 'Prism', ไอคอน: false, onclick: function () var select =) tinyMCE.activeEditor.selection.getContent (); var content = '
'+ เลือก +'
'; editor.insertContent (เนื้อหา + "\ n"); ); ); ) (); 
 
สิ่งเหล่านี้ส่วนใหญ่ถูกกำหนดโดยวิธีการที่ปลั๊กอิน TinyMCE ควรจะถูกเข้ารหัสคุณสามารถค้นหาข้อมูลบางอย่างเกี่ยวกับสิ่งนั้นได้ในเอกสารของ TinyMCE สำหรับตอนนี้สิ่งที่คุณต้องรู้ก็คือ ชื่อปุ่มของคุณ (pre_code_button) ควรใช้ในบรรทัดที่ 2 และ 3. มูลค่าของ "ข้อความ" ในบรรทัดที่ 4 จะปรากฏขึ้นหากคุณไม่ได้ใช้ไอคอน (เราจะดูที่การเพิ่มไอคอนในชั่วขณะ).
 
เมธอด onclick กำหนดว่าปุ่มนี้ทำอะไรเมื่อคลิก ฉันต้องการใช้เพื่อห่อข้อความที่เลือกไว้ในโครงสร้าง HTML ที่กล่าวถึงก่อนหน้านี้.
 
ข้อความที่เลือกสามารถจับโดยใช้ tinyMCE.activeEditor.selection.getContent (). จากนั้นฉันห่อองค์ประกอบรอบ ๆ และแทรกแทนที่เนื้อหาที่ไฮไลต์ด้วยองค์ประกอบใหม่ ฉันได้เพิ่มบรรทัดใหม่เพื่อให้ฉันสามารถเริ่มเขียนหลังจากองค์ประกอบรหัสได้อย่างง่ายดาย.
 
หากคุณต้องการใช้ไอคอนฉันขอแนะนำให้เลือกไอคอนจากชุด Dashicons ที่มาพร้อมกับ WordPress Developer Reference มีเครื่องมือที่ยอดเยี่ยมในการค้นหาไอคอนและ 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);
 
พารามิเตอร์แรกตั้งค่าเนื้อหาเริ่มต้นสำหรับกล่อง. สิ่งนี้สามารถใช้เพื่อโหลดตัวเลือกจากฐานข้อมูลเป็นต้น พารามิเตอร์ที่สองตั้งค่า ID ขององค์ประกอบ HTML พารามิเตอร์ที่สามคืออาร์เรย์ของการตั้งค่า หากต้องการอ่านเกี่ยวกับการตั้งค่าที่แน่นอนที่คุณสามารถใช้ได้ให้ดูที่เอกสารแก้ไข wp.
 
การตั้งค่าที่สำคัญที่สุดคือ textarea_name. สิ่งนี้จะเติมคุณสมบัติชื่อขององค์ประกอบ textarea ช่วยให้คุณสามารถบันทึกข้อมูลได้อย่างง่ายดาย นี่คือลักษณะที่โปรแกรมแก้ไขของฉันมีลักษณะเมื่อใช้ในหน้าตัวเลือก:
 
$ settings = array ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', การตั้งค่า $)
 
นี่เทียบเท่ากับการเขียนรหัสต่อไปนี้ซึ่งจะส่งผลให้ textarea ง่าย ๆ :
 
<?php get_option( 'buyer_bio' ) ?>
 
ข้อสรุป
 
ตัวแก้ไข TinyMCE เป็นวิธีที่ใช้งานง่ายช่วยให้ผู้ใช้มีความยืดหยุ่นมากขึ้นเมื่อเข้าสู่เนื้อหา ช่วยให้ผู้ที่ไม่ต้องการจัดรูปแบบเนื้อหาของพวกเขาเพียงแค่พิมพ์และทำกับมันและผู้ที่ต้องการเล่นแร่แปรธาตุรอบกับมันจะใช้เวลามากเท่าที่พวกเขาต้องการทำให้ถูกต้อง.
 
การสร้างปุ่มและฟังก์ชั่นใหม่นั้นสามารถทำได้ในลักษณะแยกส่วนและเราก็แค่ทำให้พื้นผิวมีความเป็นไปได้ หากคุณรู้จักปลั๊กอิน TinyMCE ที่ดีเป็นพิเศษหรือใช้เคสที่ช่วยคุณได้มากโปรดแจ้งให้เราทราบในความคิดเห็นด้านล่าง!