wordpress - 在元框中使用 WordPress 链接插入对话框？

Question

我经常使用自定义元框。很多时候，我会在元框中有一个“链接”字段。我一直在使用一个简单的文本输入字段，但我试图弄清楚如何放入一个按钮，该按钮将调用 WordPress 内容编辑器使用的相同“插入链接”对话框。那可能吗？

Answer 1

您可以通过首先对所需的 js 进行排队，然后与 wp-link js 文件方法进行交互来调用链接框。

确保您已将 wp-link 加入队列

1 /wp_enqueue_script( 'wp-link' );

2 / 设置你的用户界面。我通常使用一个按钮来调用链接对话，并使用一个文本字段来处理链接 URL。

3 / 调用链接对话

$('body').on('click', '.link-btn', function(event) {
            wpActiveEditor = true; //we need to override this var as the link dialogue is expecting an actual wp_editor instance
            wpLink.open(); //open the link popup
            return false;
        });

4 / 处理链接保存

$('body').on('click', '#wp-link-submit', function(event) {
            var linkAtts = wpLink.getAttrs();//the links attributes (href, target) are stored in an object, which can be access via  wpLink.getAttrs()
            $('your_url_textfield').val(linkAtts.href);//get the href attribute and add to a textfield, or use as you see fit
            wpLink.textarea = $('body'); //to close the link dialogue, it is again expecting an wp_editor instance, so you need to give it something to set focus back to. In this case, I'm using body, but the textfield with the URL would be fine
            wpLink.close();//close the dialogue
//trap any events
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
            event.stopPropagation();
            return false;
        });

5 / 处理链接取消

    $('body').on('click', '#wp-link-cancel, #wp-link-close', function(event) {
        wpLink.textarea = $('body');
        wpLink.close();
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
        event.stopPropagation();
        return false;
    });

应该差不多了。我在我的元框类中使用了相同的方法，它似乎工作正常。它有点像黑客，因为我正在对链接对话的 html 元素的引用进行硬编码。对话确实需要外部 API。可能并不难添加到 WP。