CKEDITOR 图像插件中的“发送到服务器”按钮功能是否可以被绕过？

Question

在CKEDITOR的Image插件上传标签中，用户必须先从计算机中选择文件，然后点击“发送到服务器”按钮将文件发送到服务器，并在信息标签中填写UI元素。

现在我查看了上传标签的代码。它是这样的 -

{
            id: 'Upload',
            hidden: false,
            filebrowser: 'uploadButton',
            label: lang.uploadTab,
            elements: [
                {
                    type: 'file',
                    id: 'upload',
                    label: lang.btnUpload,
                    style: 'height:40px'
                },
                {
                    type: 'fileButton',
                    id: 'uploadButton',
                    filebrowser: 'info:src',
                    label: lang.btnUpload,
                    'for': [ 'Upload', 'upload' ]
                }
            ]
        }

它没有完整的描述如何将“发送到服务器”按钮添加到对话框中。我实际上不希望用户先选择图像，然后手动单击按钮将图像发送到服务器，这样会显得繁琐。

我该如何自动化发送图像到服务器并填充信息选项卡中的UI元素的过程？

我的意思是，用户只需选择一个文件，选择文件后，图像应自动发送到服务器，并且信息选项卡中的所有UI元素都应填充为图像属性。完成后，用户可以像往常一样单击“确定”或“取消”以在编辑器上呈现图像。

- akg

---

你找到解决办法了吗？我现在正在处理一个类似的问题。 - SharpCode

Answer 1

我曾经遇到过同样的问题，并找到了一个很好的解决方案。我给文件选择器添加了一个onChange监听器，当触发时，我模拟点击“发送到服务器”按钮。我还隐藏了该按钮，因为用户不再需要点击它。这里棘手的部分是如何获得所需对象的引用。

CKEDITOR.on('dialogDefinition', function(ev) {
    // Take the dialog window name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if (dialogName == 'image2') {
        // Get a reference to the "Upload" tab.
        var uploadTab = dialogDefinition.getContents('Upload');
        // Get the "Choose file" input definition.
        var fileChooserDef = uploadTab.get('upload');
        // Get the "Send it to the Server" button definition, and hide that button.
        var sendButtonDef = uploadTab.get('uploadButton');
        sendButtonDef.hidden = true;

        // When a file is chosen, automatically send it to the server.
        fileChooserDef.onChange = function() {
            // Get the "Send it to the Server" button element.
            var sendButton = this.getDialog().getContentElement('Upload', 'uploadButton');
            // Simulate clicking that button.
            sendButton.click();
        };
    }
});

现在用户只需点击“选择文件”，一旦他们选择了文件，它会立即将他们弹到“图像信息”选项卡中，并填好所有内容。

我正在使用Django-Ckeditor项目，并将此代码放在ckeditor/static/ckeditor/ckeditor-init.js中的initialiseCKEditor()内。

- Ben Johnson