Wordpress：“插入阅读更多标签”如何工作？

Question

我想在新帖子页面上向 tinyMCE 编辑器添加一个按钮。使用this toturial，我设法让按钮完美工作，但有些东西我想不通。当您插入“更多”标签时，将使用适当的“背景图像”将图像附加到 html 中。请看下面的截图：

但是当您切换到“文本”模式时，会出现这样的 html 注释：<!--more-->。

我可以在 html 中添加图像，但在“文本”模式下有一个 img 标签。

我想要这样的东西：<!--my-custom-tag-->

wordpress 如何做到这一点？或者如何在 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