Изменить конфигурацию кнопки в оконном менеджере TinyMCE

Я сделал файловый менеджер для загрузки изображений на tinyMCE и получил загрузку формы и список изображений из другого файла (attachment_path). Сначала мне удалось получить URL-адрес изображения и поставить field_name, когда я выбираю изображение. Но теперь я хочу изменить кнопку отключения (Вставить) на false при выборе изображения и поместить URL-адрес изображения на кнопку (используйте настраиваемый атрибут).

скрипт на index_path :

file_browser_callback: function(field_name, url, type, win) {
        tinymce.activeEditor.windowManager.open({
          title: 'My File Manager',
          file: "<%= attachments_path %>",
          width: 450,
          height: 305,
          resizable : "no",
          inline : "yes",
          close_previous : "no",
          buttons: [{
              text: 'Insert',
              classes: 'widget btn primary first abs-layout-item',
              disabled: true,
              onclick: 'close',
              id: 'insertButton'
          }, {
              text: 'Close',
              onclick: 'close',
              window : win,
              input : field_name
          }]
        }, {
            oninsert: function(url) {
                win.document.getElementById(field_name).value = url; 
            },
            onselect: function() {
                // 
            }
        });

        return false;
    }

Вот скрипт при выборе изображения (на attachment_path):

$('a[data-rel="colorbox"]').on('click', function(e){
     e.preventDefault();
     var url = $(this).find('img:first').attr('src');
     // top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
     top.tinymce.activeEditor.windowManager.getParams().onselect();
});

Мне удалось найти http://www.tinymce.com/wiki.php/api4:class.tinymce.WindowManager, но я не могу найти набор настроек кнопок.

Изображение для рабочего процесса

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

когда кнопка установлена ​​на disabled: true :

<div id="insertButton" class="mce-disabled mce-widget mce-btn mce-primary mce-first mce-abs-layout-item" tabindex="-1" aria-labelledby="insertButton" role="button" aria-disabled="true" style="left: 319px; top: 10px; width: 56px; height: 28px;">
   <button role="presentation" type="button" tabindex="-1" style="height: 100%; width: 100%;">Insert</button>
</div>

когда кнопка установлена ​​на disabled: false :

<div id="insertButton" class="mce-widget mce-btn mce-primary mce-first mce-abs-layout-item" tabindex="-1" aria-labelledby="insertButton" role="button" aria-disabled="false" style="left: 319px; top: 10px; width: 56px; height: 28px;">
   <button role="presentation" type="button" tabindex="-1" style="height: 100%; width: 100%;">Insert</button>
</div>

Итак, я пытаюсь удалить класс и изменить атрибут в функции onselect, и он работает, чтобы нажать кнопку вставки, но когда я нажимаю ее, модальное окно не закрывается.

onselect: function() {
  var adiv = $('#insertButton').closest('div');
  adiv.removeClass('mce-disabled');
  adiv.attr('aria-disabled', 'false');
}

javascript jquery tinymce-4 file-manager
person itx    schedule 21.12.2014    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Дайте кнопке какой-нибудь уникальный идентификатор, такой как Id, а затем включите кнопку из обратного вызова. Например, вы можете сделать:

file_browser_callback: function(field_name, url, type, win) {
    tinymce.activeEditor.windowManager.open({
      title: 'My File Manager',
      file: "<%= attachments_path %>",
      width: 450,
      height: 305,
      resizable : "no",
      inline : "yes",
      close_previous : "no",
      buttons: [{
          text: 'Insert',
          classes: 'widget btn primary first abs-layout-item',
          id: 'uniqueid',
          disabled: true,
          onclick: 'close'
      }, {
          text: 'Close',
          onclick: 'close',
          window : win,
          input : field_name
      }]
    }, {
        oninsert: function(url) {
            win.document.getElementById(field_name).value = url; 
        },
        onselect: function() {
            // 
        }
    });

    return false;
}

затем в обратном вызове сделайте следующее:

$('a[data-rel="colorbox"]').on('click', function(e){
     e.preventDefault();
     $('#uniqueid').removeAttr('disabled');
     var url = $(this).find('img:first').attr('src');
     // top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
     top.tinymce.activeEditor.windowManager.getParams().onselect();
});
person Arsalan Ahmad    schedule 21.12.2014
comment
Я не смог найти конфигурацию кнопок на сайте tinyMCE. Если идентификатор не работает, просто дайте кнопке уникальное имя класса и работайте с ним. - person Arsalan Ahmad; 21.12.2014
comment
Спасибо за ваш ответ, но на самом деле я пробовал это, прежде чем задать вопрос, и модальное окно не закрывается, когда я нажимаю кнопку (кнопку вставки). - person itx; 21.12.2014
comment
Вам удалось включить кнопку вставки в функции click? - person Arsalan Ahmad; 21.12.2014
comment
во-первых, когда я устанавливаю disabled: true для кнопки вставки, кнопка работает для закрытия модального окна, а когда я устанавливаю disabled: false и пытаюсь включить кнопку вставки с помощью функции onselect, кнопка вставки может быть нажата, но модальное окно не закрывается. Поэтому я думаю, что мне следует изменить конфигурацию кнопки disabled: true на disabled: false, но я не могу найти способ для этого. - person itx; 21.12.2014
comment
Спасибо! Просто обратите внимание в v4.8, если вы назначите кнопке идентификатор uniqueid, сама кнопка будет иметь идентификатор uniqueid-button, а обертывающий div будет иметь идентификатор uniqueid. Ни сама кнопка, ни обертывающий div не имеют реквизита disabled, но обертывающий div имеет класс mce-disabled, который делает кнопку серой. Удалите это, и кнопка снова станет «активной». Однако; как упоминалось в @itx, кнопка по-прежнему не включена, и любые обработчики нажатия, определенные для кнопки, не сработают. Вам придется закрыть диалог вручную через ваш слушатель. Документов катастрофически не хватает - person Stetzon; 19.09.2019

arrow_upward
1
arrow_downward

Вы можете получить доступ к кнопкам в нижней части диалогового окна с помощью win.statusbar. У него есть метод items(), который возвращает tinymce.ui.Collection.

Чтобы включить и отключить первую кнопку («Вставить» в вашем случае), вы можете использовать

// Enable the button
win.statusbar.items().eq(0).disabled(false);
// Disable the button
win.statusbar.items().eq(0).disabled(true);

Для второй кнопки замените 0 на 1 и так далее.

Это, насколько я могу судить, совершенно недокументировано. Мне пришлось прочитать код в одном из включенных плагинов, чтобы понять, как этого добиться.

person Matt Raines    schedule 13.07.2017

arrow_upward
0
arrow_downward

Хорошо, я получаю другой способ, я не использую кнопку (контент) из TinyMCE, но делаю «кнопку вставки» в attachment_path и делаю несколько js для выбранного изображения, помещаю URL-адрес изображения на кнопку и нажимаю событие на кнопку вставки.

Сценарий:

  1. Выбрано первое изображение, атрибут отключен на кнопке и добавлен URL-адрес изображения на кнопку
  2. Затем нажмите кнопку, поместите атрибут data-url в field_name и закройте windowManager

кнопка :

<button class="btn btn-sm btn-primary no-radius" type="button" id="iButton" data-rel="tooltip" placeholder="You need to select an image" title="" data-placement="bottom" data-url="" disabled>
        <i class="ace-icon fa fa-plus-square-o"></i>
        Insert
</button>

JavaScript:

$('#iButton').on('click', function(){
    if (($('#list-all-image li').hasClass('active')) && ($(this).attr('data-url') != "")){
        var url = $(this).attr('data-url');
        top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
        top.tinymce.activeEditor.windowManager.close();
    } else {
        alert('Please select an image first!');
    }
});
person itx    schedule 21.12.2014