Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Wordpress

Как использовать значение из модального окна tinymce windowManager?

На чтение 4 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. Предварительная настройка
  4. Основная реализация
  5. Объяснение кода
  6. Заключение

Вопрос или проблема

Здравствуйте, я использую файл Javascript для интеграции кнопки с функцией в моем редакторе TinyMCE в среде WordPress. Я хочу получить значение из поля select и использовать его для дальнейших операций. Как я могу получить выбранное значение?

init : function(ed, url)
        {
            ed.addButton('code-hightlight',
            {
              title : 'Подсветка кода',
              cmd : 'code-hightlight-cmd',
              image : url + '/prism-icon.jpg'
            });
            ed.addCommand('code-hightlight-cmd', function()
            {
              tinymce.activeEditor.windowManager.open
              ({
                  title: 'Подсветка кода',
                  width : 300,
                  height : 300,
                  html :
                      '<label>Язык программирования:<select id="programming-language-id" name="programming-language-name" size="1"><option>ABAP</option><option>C#</option><option>CSS</option><option>HTML</option><option>Java</option><option>Javascript</option><option>PHP</option><option>SQL</option></select></label>',
                  buttons: [
                      {
                          text: 'Подтвердить',
                          onclick: function()
                          {
                              var id_id = tinymce.get('programming-language-id');
                              alert(id_id);
                              var id_name = tinymce.get('programming-language-name');
                              alert(id_name);
                              tinymce.activeEditor.execCommand('mceInsertContent', false, "некоторый текст");
                              tinymce.activeEditor.windowManager.close();
                          }
                      },
                      {
                          text: 'Закрыть',
                          onclick: 'close'
                      }
                  ]
              });
            });
        },

введите описание изображения здесь

Если я правильно понял ваш вопрос, это больше связано с программированием на Javascript, чем с WordPress.

Чтобы получить значение выбранного варианта или текст тега HTML select, используйте:

var e = document.getElementById("programming-language-id");
var value = e.options[e.selectedIndex].value;  // ваш код не устанавливает значение опции
var text = e.options[e.selectedIndex].text;  // это получит текст выбранной опции

Ответ или решение

Чтобы использовать значение из поля , вам необходимо использовать стандартные методы JavaScript для получения значений. Подкорректируем ваш код с учетом этого, добавив необходимые операции для извлечения значения и текста выбранной опции:

init: function(ed, url) {
    ed.addButton('code-hightlight', {
        title: 'Code-Highlight',
        cmd: 'code-hightlight-cmd',
        image: url + '/prism-icon.jpg'
    });

    ed.addCommand('code-hightlight-cmd', function() {
        tinymce.activeEditor.windowManager.open({
            title: 'Code-Highlighter',
            width: 300,
            height: 300,
            html: '<label>Programmiersprache:<select id="programming-language-id" name="programming-language-name" size="1">' +
                  '<option value="ABAP">ABAP</option>' +
                  '<option value="C#">C#</option>' +
                  '<option value="CSS">CSS</option>' +
                  '<option value="HTML">HTML</option>' +
                  '<option value="Java">Java</option>' +
                  '<option value="Javascript">Javascript</option>' +
                  '<option value="PHP">PHP</option>' +
                  '<option value="SQL">SQL</option>' +
                  '</select></label>',
            buttons: [
                {
                    text: 'Bestätigen',
                    onclick: function() {
                        // Получение выбранного элемента select
                        var select = document.getElementById("programming-language-id");

                        // Извлечение значения и текста выбранной опции
                        var selectedValue = select.options[select.selectedIndex].value;
                        var selectedText = select.options[select.selectedIndex].text;

                        // Теперь вы можете использовать selectedValue и selectedText в дальнейшем
                        console.log(selectedValue); // выводите значение в консоль
                        console.log(selectedText);   // выводите текст в консоль

                        // Вставка содержимого в редактор
                        tinymce.activeEditor.execCommand('mceInsertContent', false, "Выбранный язык: " + selectedText);
                        tinymce.activeEditor.windowManager.close();
                    }
                },
                {
                    text: 'Schließen',
                    onclick: 'close'
                }
            ]
        });
    });
}

Объяснение кода

  1. Использование document.getElementById: После того, как вы открываете модальное окно, вы должны получить элемент select с помощью его ID. Это достигается через document.getElementById("programming-language-id").

  2. Получение значения и текста:

    • selectedValue получает значение выбранной опции, которое можно использовать для дальнейших манипуляций.
    • selectedText, в свою очередь, используется для отображения текста выбранного языка программирования.

  3. Вставка содержимого: Используя tinymce.activeEditor.execCommand, вы можете вставить информацию о выбранном языке в редактор.

Заключение

Предложенный подход позволяет без проблем извлекать и использовать значение из поля

Капча загружается...