Question

我需要将所有功能添加到TinyMCE编辑器中，我希望允许上传文件，音频/视频和图像。

图片上传工作正常，但其他文件有问题。我到处都有采摘器，但文件没有发送到php。

我无法理解如何处理音频/视频文件。基本上如何将FILE发送到我的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();
    }
});

Answer 1

我使用 responsivefilemanager

解决了这个问题

这样可以更容易地将图像和其他文件插入到内容区域。

Answer 2

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

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

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

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

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

2 个答案: