Как добавить кнопку "Вставить/Изменить ссылку" в пользовательском всплывающем окне TinyMCE?

4 авг. 2016 г., 19:25:16
Просмотры: 13.8K
Голосов: 13

Мне нужно вставить текст в тело статьи, который превращается в "боковой тег" путем оборачивания в div с пользовательскими классами.

Я создал кастомную кнопку в TinyMCE, которая открывает новое окно с текстовым полем. Когда вы вводите текст и нажимаете OK, он добавляет открывающий и закрывающий div-теги и вставляет их в редактор WordPress в позицию курсора.

Вот код:

(function () {
    tinymce.PluginManager.add('custom_mce_button2', function(editor, url) {
        editor.addButton('custom_mce_button2', {
            icon: false,
            text: 'Side Tag',
            onclick: function (e) {
                editor.windowManager.open( {
                    title: 'Вставить боковой тег',
                    body: [{
                        type: 'textbox',
                        name: 'title',
                        placeholder: 'Введите содержимое бокового тега здесь.',
                        multiline: true,
                        minWidth: 700,
                        minHeight: 50,
                    },
                    {
                        type: 'button',
                        name: 'link',
                        text: 'Вставить/Изменить ссылку',
                        onclick: function( e ) {
                            //получить доступ к стандартному всплывающему окну WordPress "Вставить/изменить ссылку"
                        },
                    }],
                    onsubmit: function( e ) {
                        editor.insertContent( '<div class="side-tag-wrap hidden-xs"><div class="side-tag">' + e.data.title + '</div></div>');
                    }
                });
            }
        });
    });
})();

И что он делает:

Пользовательское всплывающее окно TinyMCE с кнопкой для боковых тегов

Пока все работает, но... Я также хочу иметь возможность добавлять ссылки, пока всплывающее окно все еще открыто, точно так же, как работает кнопка "Вставить/Изменить ссылку" в стандартном редакторе. Я знаю, как использовать плагин ссылок TinyMCE, но это не помогает. Мне нужно ссылаться на уже опубликованные записи, поэтому мне нужно это:

Стандартное окно вставки ссылок WordPress

Есть ли способ вызвать эту кнопку в моем пользовательском всплывающем окне или вызвать функцию quicktags?

1
Комментарии

Думаю, это поможет вам начать http://wordpress.stackexchange.com/questions/209490/how-to-use-wplink-without-editor

brianjohnhanna brianjohnhanna
11 авг. 2016 г. 17:06:07
Все ответы на вопрос 1
1
11

Отвечаю на свой собственный вопрос для тех, кто столкнулся или столкнётся с такой же проблемой.

Я добавил две кнопки. Одна открывает встроенное окно WordPress для выбора записи и вставки ссылки. Вторая открывает встроенное окно медиабиблиотеки для выбора изображения. Вот что в итоге получается.

скриншот интерфейса

Вам понадобятся две PHP-функции и одна JS-функция в отдельном файле. В файле functions.php или там, где у вас находятся пользовательские функции, добавьте следующее:

/**
 * Добавляем пользовательскую кнопку в редактор TinyMCE
 */
function custom_mce_buttons() {
    // Проверяем, включён ли визуальный редактор
    if ( get_user_option( 'rich_editing' ) == 'true' ) {
        add_filter( 'mce_external_plugins', 'custom_tinymce_plugin' );
        add_filter( 'mce_buttons', 'register_mce_buttons' );
    }
}
add_action('admin_head', 'custom_mce_buttons');


// Добавляем путь к JS-файлу с функцией пользовательской кнопки
function custom_tinymce_plugin( $plugin_array ) {
    $plugin_array['custom_mce_button1'] = get_template_directory_uri() .'ПУТЬ_К_JS_ФАЙЛУ';
    $plugin_array['custom_mce_button2'] = get_template_directory_uri() .'ПУТЬ_К_ДРУГОМУ_JS_ФАЙЛУ';
    return $plugin_array;
}

// Регистрируем и добавляем новую кнопку в редактор
function register_mce_buttons( $buttons ) {
    array_push( $buttons, 'custom_mce_button1' );
    array_push( $buttons, 'custom_mce_button2' );
    return $buttons;
}

И JS-файл:

(function () {
    tinymce.PluginManager.add('custom_mce_button1', function(editor, url) {
        editor.addButton('custom_mce_button1', {
            icon: false,
            text: 'ТЕКСТ_НА_КНОПКЕ',
            onclick: function (e) {
                editor.windowManager.open( {
                    title: 'ЗАГОЛОВОК_ВСПЛЫВАЮЩЕГО_ОКНА',
                    body: [{
                        type: 'textbox',
                        name: 'title',
                        placeholder: 'ТЕКСТ_ПЛЕЙСХОЛДЕРА',
                        multiline: true,
                        minWidth: 700,
                        minHeight: 50,
                    },
                    {
                        type: 'button',
                        name: 'link',
                        text: 'Вставить/Редактировать ссылку',
                        onclick: function( e ) {
                            // Получаем всплывающее окно WordPress "Вставить/редактировать ссылку"
                            var textareaId = jQuery('.mce-custom-textarea').attr('id');
                            wpActiveEditor = true; // Нужно переопределить эту переменную, так как диалоговое окно ссылки ожидает экземпляр wp_editor
                            wpLink.open( textareaId ); // Открываем всплывающее окно ссылки
                            return false;
                        },
                    },
                    {
                        type: 'button',
                        name: 'image',
                        classes: 'sidetag-media-button',
                        text: 'Вставить медиафайл',
                        onclick: function( e ) {

                            jQuery(function($){
                                // Устанавливаем все переменные, которые будут использоваться в области видимости
                                var frame;
                                // Должно совпадать с "textareaID" выше, так как это поле ввода, в которое мы
                                // будем вставлять данные в формате HTML.
                                var imgContainer = $( '.mce-custom-textarea' );

                                // ДОБАВЛЯЕМ ССЫЛКУ НА ИЗОБРАЖЕНИЕ
                                event.preventDefault();

                                // Если медиафрейм уже существует, открываем его снова.
                                if ( frame ) {
                                    frame.open();
                                    return;
                                }

                                // Создаём новый медиафрейм
                                frame = wp.media({
                                    title: 'Выбрать или загрузить медиафайл',
                                    button: {
                                      text: 'Использовать этот файл'
                                    },
                                    multiple: false  // Установите true, чтобы разрешить выбор нескольких файлов
                                });

                                // Когда изображение выбрано в медиафрейме...
                                frame.on( 'select', function() {

                                    // Получаем детали вложения из состояния фрейма
                                    var attachment = frame.state().get('selection').first().toJSON();

                                    // Отправляем URL вложения в наше пользовательское поле ввода изображения.
                                    var imageContent = '<img class="side-tag-image" src="'+attachment.url+'" alt="'+attachment.alt+'" style="max-width:100%;"/>'+attachment.caption;
                                    imgContainer.val( imageContent + imgContainer.val() );

                                });
                                // В конце открываем модальное окно по клику
                                frame.open();
                        });
                        return false;
                        }
                    }],
                    onsubmit: function( e ) {
                        // Обёртываем содержимое в div с указанным классом
                        editor.insertContent( '<div class="ИМЯ_КЛАССА">' + e.data.title + '</div>');
                    }
                });
            }
        });
    });
})();

Надеюсь, это поможет кому-то из вас..

7 февр. 2017 г. 19:37:18
Комментарии

У меня две проблемы с этим: всплывающее окно вставки медиа открывается за другим моим всплывающим окном; и ссылка вообще не выводится.

Samyer Samyer
24 авг. 2017 г. 17:27:08