वर्डप्रेस: ​​'अधिक टैग पढ़ें सम्मिलित करें' कैसे काम करता है?

Question

मैं नए पोस्ट पेज पर tinyMCE संपादक को एक बटन जोड़ना चाहता हूं। this toturial के साथ मैं बटन को पूरी तरह से काम करने में कामयाब रहा, लेकिन ऐसा कुछ है जिसे मैं समझ नहीं पाया। जब आप "अधिक" टैग डालते हैं, तो एक छवि HTML 'को उचित' पृष्ठभूमि-छवि 'के साथ जोड़ दी जाएगी। स्क्रीनशॉट देखें:

लेकिन जब आप 'टेक्स्ट' मोड पर स्विच करते हैं तो इस तरह की एक HTML टिप्पणी होती है: <!--more-->।

मैं एचटीएमएल में छवि जोड़ सकता हूं लेकिन 'टेक्स्ट' मोड पर img टैग है।

मैं कुछ इस तरह करना चाहते हैं: <!--my-custom-tag-->

यह कैसे वर्डप्रेस कर लेते हैं? या मैं tinyMCE संपादक पर एक कस्टम टैग कैसे जोड़ सकता हूं?

Answer 1

मुझे जवाब मिला। आप संपादक वस्तु पर BeforeSetContent और PostProcess घटनाओं को जोड़ने की जरूरत है (कि मैंने पहले उल्लेख किया है, पहले this toturial का पालन करें अपने बटन जोड़ने के लिए):

tinymce.create('tinymce.plugins.MyPlugin', { 
    init: function(editor, url) { 
     // Code to add the button... 

     // Replace tag with image 
     editor.on('BeforeSetContent', function(e) { 
      if (e.content) { 
       if (e.content.indexOf('<!--my-custom-tag-->') !== -1) { 
        e.content = e.content.replace('<!--my-custom-tag-->', '<img src="' + tinymce.Env.transparentSrc + '" ' + 'class="wp-my-custom-tag mce-wp-my-custom-tag" title="My Tag..." data-mce-resize="false" data-mce-placeholder="1" />'); 
       } 
      } 
     }); 
     // Replace image with tag 
     editor.on('PostProcess', function(e) { 
      if (e.content) { 
       if (e.content.indexOf('<!--my-custom-tag-->') !== -1) { 
        e.content = e.content.replace('<!--my-custom-tag-->', '<img src="' + tinymce.Env.transparentSrc + '" ' + 'class="wp-my-custom-tag mce-wp-my-custom-tag" title="My Tag..." data-mce-resize="false" data-mce-placeholder="1" />'; 
       } 
      } 
     }); 

    } 
}); 

Answer 2

या आप एक शोर्ट बना सकते हैं। मैं हमेशा इसका उपयोग करता हूं आप लिख सकते हैं कि आप अपना कोड हैं ताकि आप इसे समझ सकें। Tinymce से jQuery में कोई लेखन करने के लिए बहुत कम!

उदाहरण

function oex_toggle_ul($atts, $content = null){ 
extract(shortcode_atts(array(
    ),$atts)); 


    return '<ul>'.do_shortcode($content).'</ul>'; 

} 

function oex_toggle($atts, $content = null){ 
    extract(shortcode_atts(array(
     'titel' => '', 
     'open' => 'closed' 
     ),$atts)); 

    return '<li class="'.$open.'"><a href="#">'.$titel.'<span></span></a><ul class="'.$open.'">'.do_shortcode($content).'</ul></li>'; 
} 

https://codex.wordpress.org/Function_Reference/add_shortcode