Добавьте элемент ввода type=file в контейнер tinymce

Я пытаюсь расширить плагин tinymce, и мне нужно добавить элемент ввода типа = файл.

(Я новичок в таком упражнении, поэтому, пожалуйста, извините за мое невежество.. Также не удалось найти примеры/образцы для работы..)

Кажется, вы можете сделать следующее, чтобы показать элементы в контейнере, который открывается на панели:

var generalFormItems = [
  {name: 'alt', type: 'textbox', label: 'Image description'},
  {name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
];

win = editor.windowManager.open({
   title: 'Insert/edit image',
   data: data,
   bodyType: 'tabpanel',
   body: [
           {
        title: 'General',
        type: 'form',
        items: generalFormItems
       },
    ],
    onSubmit: onSubmitForm });

Я заинтересован в добавлении входного html типа = файл (<input type="file".../>). Таким образом, должна быть обычная кнопка html, которая будет отображать «диалоговое окно файла» в браузере, чтобы пользователь мог выбрать файл. Итак, я надеюсь на что-то вроде этого:

    var generalFormItems = [
      {name: 'alt', type: 'textbox', label: 'Image description'},
      {name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},

--->  {name: 'fileSelect', type: 'file', label: 'Select a File to Upload'},

    ];

Возможно ли это сделать и как?


file-upload tinymce tinymce-4
person user1055761    schedule 30.11.2013    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Удалось понять это и хочу оставить ответ здесь для других, пытающихся сделать что-то подобное.

В каждом элементе формы пользовательского интерфейса есть «подтип», который будет добавлен в DOM как есть. Так что нижеприведенное помогло мне:

{name: 'file', type: 'textbox', subtype: 'file', label: 'Upload', onchange: uploadFile},

иллюстрация

person user1055761    schedule 30.11.2013
comment
Любая идея, как сделать поле формы доступным только для чтения, я пытался добавить readonly:'readonly' в список, но он не был добавлен в дом. - person Justin Bicknell; 03.01.2014
comment
Разобрался, добавил к этому элементу событие onPostRender, отключил изнутри - person Justin Bicknell; 04.01.2014

arrow_upward
3
arrow_downward

В TinyMCE 3.x все диалоги, в которых HTML-страницы были загружены в iframe или окно. Это было изменено в TinyMCE 4, чтобы упростить создание плагинов и полную поддержку CDN:s. Но вы по-прежнему можете загружать HTML-страницы в диалоги TinyMCE с помощью WindowManager.

// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
    title: 'Insert/edit image',
    url: 'dialogTemplate.html',
    width: 700,
    height: 600
});

Также вы можете встроить HTML:

// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
    title: 'Upload a file to attach',
    html: '<input type="file" class="input" name="file" id="file_attach" style="font-size: 14px; padding: 30px;" />',
    width: 450,
    height: 80,
    buttons: [{
            text: 'Attach',
            subtype: 'primary',
            onclick: function() {
                // TODO: handle primary btn click
                (this).parent().parent().close();
            }
        },
            {
                text: 'Close',
                onclick: function() {
                    (this).parent().parent().close();
                }
            }]
});

иллюстрация

person naXa    schedule 11.01.2016