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;
    });

应该这样做。我在metabox类中使用相同的方法，它似乎工作正常。因为我正在硬编码对链接对话框的html元素的引用。对话确实需要一个外部API。可能并不是很难添加到WP。

Answer 2

wordpress编辑器使用tinyMCE作为编辑器。但是，与帖子相关的自定义字段显示在一个特殊的可移动框中，帖子的the documentation that creates the edition box清楚地表明，一旦添加了WYSIWYG编辑器，它就不能在DOM周围移动，因此它不能添加到那种盒子里。

这意味着如果你想要添加你正在寻找的那种功能，你可能需要在代码中手动跟踪生成该屏幕的大部分内容。

在metabox中使用WordPress链接插入对话框？

2 个答案: