代码之家 › 专栏 › 技术社区 › dkruchok

TinyMCE上传音频/视频/图像/文件

tinymce html jquery php javascript

dkruchok · 技术社区 · 8 年前

图片上传正常,但其他文件有问题。

基本上是如何将文件发送到我的PHP处理程序并获取保存文件的url(我使用TinyMCE documentatin中的PHP处理程序)。

tinyMCE.init({
    selector: '.tinyMCE-content-full',
    height: 400,
    theme: 'modern',
    plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help image code'
    ],
    toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | fontsizeselect',
    toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',

    fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
    image_advtab: true,
    file_picker_types: 'file image media',
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/clients/tinymceFileUpload');
        var token = $('[name="csrf-token"]').prop('content');
        xhr.setRequestHeader("X-CSRF-Token", token);
        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;
            }
            success(json.location);
        };
        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
    },
    file_picker_callback: function(cb, value, meta) {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/* audio/* video/*');
        input.onchange = function() {
            var file = this.files[0];

            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var id = 'blobid' + (new Date()).getTime();
                var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(',')[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);

                // call the callback and populate the Title field with the file name
                cb(blobInfo.blobUri(), { title: file.name });
            };
        };

        input.click();
    }
});

3 回复 | 直到 8 年前

dkruchok 8 年前

我通过使用解决了这个问题 responsivefilemanager

Bud Damyanov 8 年前

您只能将HTML5视频和音频元素添加到可编辑区域。它还将“插入/编辑视频”项添加到“插入”菜单下以及工具栏按钮。您需要的选项称为

启用此选项后,用户将在可编辑区域内看到嵌入式视频内容的实时预览,而不是占位符图像。这意味着用户可以在编辑器中播放视频剪辑,如YouTube。

默认情况下,此选项处于启用状态,并接受用户在对话框的源字段或嵌入字段中输入的URL。

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "media",
  menubar: "insert",
  toolbar: "media",
  media_live_embeds: true
});

Balcha Bekele Lawca 4 年前

file_picker_types: 'image',
                file_picker_callback: function(cb, value, meta) {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');

                    input.onchange = function() {
                    var file = this.files[0];
                    var reader = new FileReader();
                    
                    reader.onload = function () {
                        var id = 'blobid' + (new Date()).getTime();
                        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                        var base64 = reader.result.split(',')[1];
                        var blobInfo = blobCache.create(id, file, base64);
                        blobCache.add(blobInfo);

                        // call the callback and populate the Title field with the file name
                        cb(blobInfo.blobUri(), { title: file.name });
                    };
                    reader.readAsDataURL(file);
                    };
                    
                    input.click();
                },