Как я могу использовать встроенную в Wordpress функцию просмотра ссылок?

Я кодирую виджет и хотел бы, чтобы пользователь мог выбирать ссылку, как вы, при редактировании обычных сообщений или страницы (когда вы нажимаете на маленький значок ссылки и получаете всплывающую функцию поиска AJAX во всплывающем окне). ). Кто-нибудь знает, как у меня это работает? У меня есть кнопка HTML, которую я хотел бы прикрепить и даже нажать на нее, и поле для ввода значения.

В class-wp-editor.php я нашел несколько интересных вещей и подумал, могут ли мне понадобиться эти файлы ..?

wp_enqueue_script('wp-fullscreen');
wp_enqueue_script('wplink');

При вызове fullscreen.link();, как файл, упомянутый выше, я получаю эту ошибку:

Uncaught ReferenceError: wpActiveEditor is not defined

... и сейчас я в тупике, потому что JS, который ссылается на эту переменную, выглядит для меня сумасшедшим.

Хотите указать мне правильное направление? Я хотел бы, чтобы это работало, это сделает убийственный пользовательский интерфейс для моих виджетов!

------редактировать-------

Пока не так много кода, кроме включений в сценарии, о которых я уже говорил;

<label for="<?php echo $this->get_field_name('link'); ?>">Link URL (including http://) : </label>
<input type="text" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" value="<?php if(isset($link)) echo esc_attr($link); ?>" class="widefat" />
<button class="secondary" id="choose_link">Link Browser</button>

... часть JS, которая должна запускать скрипт связи;

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});

Я вызываю диалог ссылок внутри класса metabox, который я использую для разработки. Это немного хакерски, но может быть сделано, пока не разработано что-то более надежное .

Вы можете вызвать окно ссылок, сначала включив требуемый js, а затем взаимодействуя с методами ws-link js files.

Убедитесь, что вы поставили в очередь wp-ссылку

1 / wp_enqueue_script( 'wp-link' );

2 / Настройте свой интерфейс. Я обычно использую кнопку для вызова диалога ссылок и текстовое поле для обработки URL ссылок.

3 / Вызвать диалог ссылок

var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners

function _init() {
    $('body').on('click', '.lm-link-button', function(event) {
        _addLinkListeners();
        _link_sideload = false;

        var link_val_container = $('#your_input_field');

        if ( typeof wpActiveEditor != 'undefined') {
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        } else {
            window.wpActiveEditor = true;
            _link_sideload = true;
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        }
        return false;
    });

}

/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
    $('body').on('click', '#wp-link-submit', function(event) {
        var linkAtts = wpLink.getAttrs();
        var link_val_container = $('#your_input_field');
        link_val_container.val(linkAtts.href);
        _removeLinkListeners();
        return false;
    });

    $('body').on('click', '#wp-link-cancel', function(event) {
        _removeLinkListeners();
        return false;
    });
}

function _removeLinkListeners() {
    if(_link_sideload){
        if ( typeof wpActiveEditor != 'undefined') {
            wpActiveEditor = undefined;
        }
    }

    wpLink.close();
    wpLink.textarea = $('html');//focus on document

    $('body').off('click', '#wp-link-submit');
    $('body').off('click', '#wp-link-cancel');
}

/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
    init:       _init,
};

})(jQuery);


// Initialise
jQuery(document).ready(function($){
 'use strict';
 link_btn.init();
});

4 // ставим сценарии в очередь. Добавьте следующее в файл functions.php и отрегулируйте имена / пути к файлам в соответствии с вашими предпочтениями.

function linkbtn_enqueue() {
    //register script
    wp_register_script('link_btn',get_template_directory_uri() . '/js/link_btn.js', array('jquery'), '1.0', true);
    //now load it
    wp_enqueue_script( 'link_btn');
}

 add_action( 'admin_enqueue_scripts', 'linkbtn_enqueue' );

Должны о том, чтобы сделать это. Я использую тот же подход в своем классе метабокса, и, похоже, он работает нормально.

RE: «Как бы вы это сделали? (Примерно?)»

Во-первых, я бы построил его аналогично функциональности ссылок в WordPress: поле ввода текста, результаты, выбор функций и кнопка отправки (добавления ссылки).

Ajax - срабатывает при вводе текста во входные данные, возвращая набор результатов в зависимости от условия поиска. Посмотрите, что мы сделали с нашим плагином quicksearch , WP Jarvis. Вам просто нужно настроить вызов ajax для цели ajaxurl (admin-ajax.php) и установить хук действия в вашем php для выполнения запроса и вывода результатов в формате json. Вы хотите, чтобы результаты включали заголовок, посттип и постоянную ссылку для каждого результата. Узнайте больше о AJAX в плагинах .

Наконец, выбор интересующего вас результата позволит получить постоянную ссылку из объекта json и вставить в поле виджета.

Я знаю, что это не полный ответ, но я надеюсь, что это поможет.