โฮมเพจ » WordPress » ใช้ตัวแก้ไข TinyMCE ใน WordPress [Guide]

    ใช้ตัวแก้ไข 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 ง่าย ๆ :

    ข้อสรุป

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

    การสร้างปุ่มและฟังก์ชั่นใหม่นั้นสามารถทำได้ในลักษณะแยกส่วนและเราก็แค่ทำให้พื้นผิวมีความเป็นไปได้ หากคุณรู้จักปลั๊กอิน TinyMCE ที่ดีเป็นพิเศษหรือใช้เคสที่ช่วยคุณได้มากโปรดแจ้งให้เราทราบในความคิดเห็นด้านล่าง!

    © PHHSNEWS
    ข้อมูลที่เป็นประโยชน์และเคล็ดลับในการพัฒนาเว็บ การเขียนโปรแกรม, ออกแบบเว็บไซต์, CSS, HTML, JAVASCRIPT กำหนดค่าและติดตั้ง WINDOWS อีกครั้ง การสร้างเว็บไซต์และแอปพลิเคชันตั้งแต่เริ่มต้น