Wordpress: Jak działa tag "Wstaw Read More"?

Question

Chcę dodać przycisk do edytora tinyMCE na nowej stronie postu. Dzięki this toturial udało mi się uzyskać idealnie działający przycisk, ale jest coś, czego nie mogłem wymyślić. Po wstawieniu znacznika "Więcej" obraz zostanie dołączony do html z odpowiednim "obrazem tła". Zobacz zrzut ekranu poniżej:

Ale po przejściu do trybu "Tekst" pojawia się komentarz html: <!--more-->.

Mogłabym dodać obraz w html, ale w trybie "Tekst" znajduje się tag img.

chcę mieć coś takiego: <!--my-custom-tag-->

Jak wordpress uda się to zrobić? Albo w jaki sposób mogę dołączyć niestandardowy tag do edytora tinyMCE?

Answer 1

Znalazłem odpowiedź. Trzeba dodać BeforeSetContent i PostProcess zdarzeń na obiekcie Editor (Jak już wspomniano wcześniej, najpierw wykonaj this toturial dodać przycisk):

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

Albo można zrobić shortcode. Używam go, zawsze możesz napisać własny kod, żebyś to zrozumiał. Nie ma żadnego pisania w jQuery z tinymce!

przykład

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