source

워드프레스:'더 읽기 태그 삽입'은 어떻게 작동합니까?

nicesource 2023. 10. 11. 20:48
반응형

워드프레스:'더 읽기 태그 삽입'은 어떻게 작동합니까?

나는 새로운 포스트 페이지의 작은 MCE 에디터에 버튼을 추가하고 싶습니다.이것으로 버튼을 완벽하게 작동시켰지만, 제가 이해하지 못한 부분이 있습니다."More" 태그를 삽입하면 이미지가 HTML에 적절한 'background-image'와 함께 추가됩니다.아래 스크린샷 참조:more tag

그러나 'Text' 모드로 전환하면 다음과 같은 html 주석이 나타납니다.<!--more-->.enter image description here

html에 이미지를 추가할 수는 있지만 'Text' 모드에서는 이미지를 추가할 수 있습니다.img꼬리표를 매다enter image description here enter image description here

나는 이런 것을 갖고 싶습니다.<!--my-custom-tag-->

워드프레스는 어떻게 이것을 할 수 있습니까?아니면 작은 MCE 편집기에 사용자 지정 태그를 추가하려면 어떻게 해야 합니까?

답을 찾았습니다.추가할 필요가 있습니다.BeforeSetContent그리고.PostProcess편집기 개체에 대한 이벤트(앞에서 언급했듯이, 먼저 버튼을 추가하려면 이 항목을 수행하십시오):

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" />';
                }
            }
        });

    }
});

아니면 쇼트코드를 만들 수도 있습니다.나는 항상 그것을 사용합니다. 당신이 이해할 수 있도록 당신 자신의 코드를 쓸 수 있습니다.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

언급URL : https://stackoverflow.com/questions/23456337/wordpress-how-does-insert-read-more-tag-works

반응형