«

DcatAdmin 配置富文本,TinyEditor 上传文件,上传视频

chunkuan 发布于 阅读:294 后端


Editor::resolving(function (Editor $editor) {
    $editor->options(
        [
            'file_picker_callback' => \Dcat\Admin\Support\JavaScript::make(<<<JS
                function (callback, value, meta) {
                    // 设置上传地址为原富文本框图片文件上传地址
                    var upurl = opts.images_upload_url;
                    var filetype = '';
                    // 处理媒体类型文件能选择的文件类型
                    if (meta.filetype == 'media') {
                        filetype = '.mp4,.webm,.ogg'
                    }
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', filetype);
                    input.click();
                    input.onchange = function() {
                        // 文件选择后进行上传
                        var file = this.files[0];
                        var xhr, formData;
                        console.log(file.name);
                        xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', upurl);
                        xhr.onload = function() {
                            var json;
                            if (xhr.status != 200) {
                                failure('HTTP Error: ' + xhr.status);
                                return;
                            }
                            json = JSON.parse(xhr.responseText);
                            if (!json || typeof json.location != 'string') {
                                failure('Invalid JSON: ' + xhr.responseText);
                                return;
                            }
                            callback(json.location, {
                                title: file.name,
                                text: file.name
                            });
                        };
                        formData = new FormData();
                        formData.append('file', file, file.name );
                        xhr.send(formData);
                    }
                }
            JS),
        ]
    );
});

DcatAdmin Editor TinyEditor 文件上传 视频上传