在metabox使用WordPress链接插入对话框?(Use WordPress link ins

2019-07-30 19:03发布

我使用自定义metaboxes相当频繁。 很多时候,我会在metabox一个“链接”栏。 我一直在使用只是一个简单的文本输入框,但我试图找出如何把一个按钮将调用相同的“插入链接”对话框,WordPress的内容编辑器使用。 那可能吗?

Answer 1:

您可以通过先入队所需要的JS,然后与WP-链接js文件的方法进行交互调用链接框。

请确保您已排队WP-链接

1 / wp_enqueue_script( 'wp-link' );

2 /设置你的用户界面。 我通常使用一个按钮来调用从链接的对话和一个文本框来处理链接的网址。

3 / Invoke的链接对话

$('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。



文章来源: Use WordPress link insert dialog in metabox?
标签: wordpress