วิธีแก้ปัญหาการแสดงผลรหัสย่อใน Admin Editor

ฉันได้ถามคำถามนี้เมื่อประมาณหนึ่งปีที่แล้วและฉันหวังว่าจะมีวิธีแก้ปัญหาแบบง่าย ๆ ซึ่งจะทำให้ฉันบรรลุวัตถุประสงค์ ดังนั้นที่นี่มันจะไป:

ฉันมักจะใช้รหัสย่อภายใน Admin Editor แต่เมื่อฉันส่งให้ลูกค้าพวกเขามักจะไม่เข้าใจวิธีการทำงาน

สิ่งที่ฉันกำลังมองหาคือโซลูชันที่จะแสดงผลลัพธ์การเชื่อมโยงของรหัสย่อภายในเอดิเตอร์ WYSIWYG แบบอัตโนมัติ

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

จริงๆแล้วมันก็ไม่ได้เลวร้ายอะไรนักในการทำสิ่งที่คุณขอ การดำเนินการนี้จะใช้เวลาประมาณหนึ่งชั่วโมงในการทำสิ่งแรกและ 10 นาทีในการทำสิ่งต่อไป

ในที่สุดสิ่งที่คุณจะทำคือการสร้างปลั๊กอิน TinyMCE นี่คือสิ่งที่คุณควรเริ่มต้นด้วยตัวเอง:

1. คำแนะนำทั่วไปในการสร้างปลั๊กอิน tinymce
2. โค้ดตัวอย่างจาก WordPress Core
3. คำแนะนำทั่วไปเกี่ยวกับการเพิ่มปลั๊กอิน TinyMCE ใน WordPress ฉันพบสิ่งนี้ซึ่งดูเหมือนว่าเพียงพอ

ตอนนี้คุณมีเครื่องมือทั้งหมดที่จะทำให้เสร็จเรียบร้อย! จากทั้งหมดนี้รหัสที่คุณสนใจมากที่สุดคือบล็อกนี้ในรหัสตัวอย่าง WP:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

ที่นี่รหัสย่อสำหรับแกลเลอรีจะถูกแทนที่ด้วยimgแท็ก imgแท็กมีชั้นเรียนwp-galleryที่ได้รับโดยอ้างCSS ที่พบที่นี่

แก้ไข 2016-04-06:อัปเดตเนื้อหาและลิงก์สำหรับ TinyMCE 4 และ WordPress 4.4

นี่ไม่ใช่คำตอบที่สมบูรณ์เพียงแค่ทิศทางการออกแบบ ฉันคิดว่าวิธีที่ดีที่สุดคืออะไรแบบนี้:

ในโพสต์แก้ไขของผู้ดูแลระบบ

Rip ย่อทั้งหมดจากการโพสต์ที่บันทึกไว้และทำให้มันภายใน metabox ที่นอกเหนือจากการแก้ไข ทำให้เงาพวกเขาปรากฏในลำดับเดียวกันกับรหัสย่อที่เกิดขึ้นในตัวแก้ไขเล็ก

ใน tinyMCE javascript API

สร้างฟังก์ชั่น jQuery เมื่อผู้ใช้คลิกที่ shortcode มันจะสลับ HTML จาก metabox ลงในตัวแก้ไข และในทางกลับกัน. คำสั่งนั้นควรจะตกลงในฐานะที่เป็นสมาคม แต่ฉันไม่ได้คิดเกี่ยวกับการใส่รหัสย่อ อย่างไรก็ตามมีหลายวิธีในการออกแบบการเชื่อมต่อ ID ที่ดี การอัปเดตรหัสย่อสามารถทำได้ทันทีด้วย Ajax

อย่าบันทึกสถานะรหัสย่อที่แสดงผล

ก่อนที่จะสลับโปรแกรมแก้ไขให้บันทึกแบบร่างอัตโนมัติและเผยแพร่ทำการเรียก API เพื่อเรียกคืนสถานะดังนั้นรหัสย่อที่แสดงจึงไม่เคยได้รับการบันทึก ...

สิ่งนี้สามารถทำได้ แต่คุณต้องคุ้นเคยกับ tinyMCE API เพื่อทำความเข้าใจว่าเมื่อใดและเมื่อใดที่จะเข้าถึงเนื้อหาของโปรแกรมแก้ไขและขอเข้าสู่การกระทำของจาวาสคริปต์ก่อนที่จะ 'บันทึก' และอีกมากมาย

สามารถมีตัวแก้ไข tinyMCE หลายตัวใน pageload โพสต์แก้ไขเดียวกัน

ส่วนเรียกคืนสามารถตรวจสอบได้โดยดูที่[gallery]beaviour รหัส แต่การคลิกบน[MY_SHORTCODE]นั้นจะต้องทำโดยเทคนิค jQuery

ในสคริปต์ admin_footer เข้าถึงเนื้อหาที่เคอร์เซอร์ทำงานด้วย:

var $editor_content = $(tinymce.activeEditor.getBody());

เป็นคำใบ้ของวิธีการเริ่มต้น

ฉันกำลังมองหาวิธีที่จะแสดงกราฟิกและปรับแต่งรหัสย่อเกินไป และตอนนี้ในที่สุดฉันก็พบว่ามีการสอนที่ทำเช่นนั้น: https://generatewp.com/take-shortcodes-ultimate-level/

ฉันเพิ่มคำอธิบายเพื่อให้เครื่องมือค้นหาหยิบมันขึ้นมา:

เรากำลังจะสร้างปลั๊กอินอย่างง่ายพร้อมรหัสย่อจากนั้นเราจะเพิ่มปุ่มตัวแก้ไข TinyMCE เพื่อแทรกรหัสย่อที่เป็นป๊อปอัพซึ่งจะรวบรวมการป้อนข้อมูลผู้ใช้ทั้งหมดสำหรับแอตทริบิวต์รหัสย่อ จากนั้นเราจะแทนที่รหัสย่อในโปรแกรมแก้ไข TinyMCE ด้วยรูปภาพตัวแทนเช่นเดียวกับแกลเลอรีดั้งเดิมของ WordPress (ซึ่งจริงๆแล้วเป็นรหัสย่อในกรณีที่คุณไม่ทราบ) และสุดท้าย - เราจะอนุญาตให้แก้ไขได้ ของ shortcode และคุณสมบัติของมันโดยดับเบิลคลิกที่ภาพตัวแทน