Question

我正在尝试扩展一个tinymce插件，需要添加一个type = file的输入元素。

（我是新手，所以请原谅我的无知..也找不到合适的例子/样品..）

您似乎可以执行以下操作以向在面板中打开的容器显示元素：

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 });

我有兴趣添加type = file（<input type="file".../>）的输入html。因此应该有通常的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'},

    ];

可以这样做吗？

Answer 1

管理得出这个想法，并希望将答案留给其他试图做类似事情的人。

每个UI表单元素上都有一个“子类型”，它将按原样添加到DOM中。所以做下面的事情对我有用：

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

Answer 2

在TinyMCE 3.x中所有对话框，其中HTML页面已加载到iframe或窗口中。这在TinyMCE 4中已经改变，以便更容易制作插件并完全支持CDN：s。但您仍然可以使用WindowManager将基于HTML的页面加载到TinyMCE对话框中。

// 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();
                }
            }]
});

在tinymce容器中添加type = file的输入元素

2 个答案: