TinyMCE télécharger audio/vidéo/images/fichiers

Question

Je dois ajouter toutes les fonctionnalités à TinyMCE Editor et je veux autoriser les fichiers de téléchargement, audio/vidéo et images.

Les images qui se téléchargent fonctionnent bien, mais ont un problème avec d'autres fichiers. J'ai des sélecteurs partout mais les fichiers ne sont pas envoyés à PHP.

Je ne comprends pas comment procéder avec les fichiers audio/vidéo. Fondamentalement, comment envoyer un fichier à mon gestionnaire PHP et obtenir l'URL pour enregistrer le fichier (j'utilise le gestionnaire PHP à partir de documents TinyMCE).

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

Je resolveed cela en utilisant responsivefilemanager

Cette chose beaucoup plus facile d'insérer des images et d'autres fichiers à la zone de contenu.

Answer 2

Vous pouvez uniquement ajouter des éléments vidéo et audio HTML5 dans la zone modifiable. Il ajoute également l'élément Insérer/éditer la vidéo dans le menu Insertion ainsi qu'un bouton de la barre d'outils. L'option dont vous avez besoin est appelé media_live_embeds

Lorsque vous activez cette option Les utilisateurs verront un aperçu en direct de contenu vidéo intégré dans la zone modifiable, plutôt qu'une image d'espace réservé. Cela signifie que les utilisateurs peuvent lire un clip vidéo, tel que YouTube, dans l'éditeur.

Cette option est activée par défaut et accepte les URL entrées dans le champ source ou incorporées dans la boîte de dialogue par l'utilisateur.

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