TinyMCE Audio/Video/Bilder/Dateien hochladen

Question

Ich muss alle Funktionen zum TinyMCE Editor hinzufügen und ich möchte Upload-Dateien, Audio/Video und Bilder zulassen.

Bilder hochladen Arbeit ok, aber ein Problem mit anderen Dateien. Ich habe Picker überall aber Dateien nicht an PHP gesendet.

Ich kann nicht verstehen, wie man mit Audio/Video-Dateien, um fortzufahren. Grundsätzlich, wie FILE zu meinem PHP-Handler zu senden und URL zur gespeicherten Datei zu erhalten (ich benutze PHP-Handler von TinyMCE Documentatin).

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

I resolveed dies durch responsivefilemanager

Diese Sache viel einfacher mit Bildern und anderen Dateien auf Inhaltsbereich einzufügen.

Answer 2

Sie können dem bearbeitbaren Bereich nur HTML5-Video- und Audioelemente hinzufügen. Es fügt auch den Punkt Video einfügen/bearbeiten im Menü Einfügen sowie eine Schaltfläche in der Symbolleiste hinzu. Die Option, die Sie brauchen, ist media_live_embeds genannt

Wenn Sie diese Option, um Benutzer ermöglichen, eine Live-Vorschau der integrierten Video-Inhalte im bearbeitbaren Bereich sehen, sondern als ein Platzhalter-Bild. Dies bedeutet, dass Benutzer einen Videoclip wie YouTube im Editor abspielen können.

Diese Option ist standardmäßig aktiviert und akzeptiert URLs, die vom Benutzer in das Quellfeld oder das Einbettungsfeld im Dialogfeld eingegeben werden.

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