Wordpress: come funziona "Inserisci altro tag"?

Question

Voglio aggiungere un pulsante a tinyMCE editor nella nuova pagina di post. Con this toturial sono riuscito a far funzionare perfettamente il pulsante, ma c'è qualcosa che non riuscivo a capire. Quando inserisci un tag "Altro", un'immagine viene aggiunta all'html con l'appropriata 'immagine di sfondo'. Vedere l'immagine seguente:

Ma quando si passa alla modalità 'Testo', è presente un commento html come questo: <!--more-->.

Potrei aggiungere l'immagine in html ma in modalità 'Testo' c'è un tag img.

voglio avere qualcosa di simile: <!--my-custom-tag-->

Come wordpress riescono a fare questo? O come posso aggiungere un tag personalizzato su tinyMCE editor?

Answer 1

Ho trovato la risposta. È necessario aggiungere BeforeSetContent e PostProcess eventi sull'oggetto Editor (Come ho già detto in precedenza, prima seguire this toturial aggiungere la pulsante):

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

Oppure si può fare uno shortcode. Lo uso sempre puoi scrivere il tuo codice in modo che tu lo capisca. Poco o niente da scrivere in jQuery da parte di tinymce!

esempio

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