Bilder mit TinyMCE und RoR auf geschützte Seite hochladen

Question

Ich brauche keine konkrete Lösung, aber jemand, der mir einen näheren Hinweis gibt, um mein Problem zu lösen. Ich habe einen Rubin auf Schienen 4 Intranet-Anwendung, die Login-geschützt ist. In dieser Anwendung habe ich eine Bearbeitungsseite, wo ich auch TinyMCE verwende. Es hat die Fähigkeit, eine URL anzugeben, wohin das Bild gesendet werden soll, um es hochzuladen (siehe here). Ich implementierte die Upload-Routine mit CarrierWave und es funktioniert gut außerhalb von TinyMCE. Wenn es möglich ist, würde ich auch dieses Plugin behalten. Aber wie gesagt, CarrierWave arbeitet derzeit nicht mit TinyMCE und einem asynchronen Upload.

So haben Sie eine Idee, wie ich ein Bild hochladen kann, aber mit der richtigen Sitzung Token (asynchron). Und die Bild-URL, die nicht die Datenbank speichert, sondern in dem Text, der in TinyMCE angezeigt wird. Gibt es ein Plugin, das mir oder irgendetwas anderem helfen kann? Wenn Sie nähere Informationen benötigen, bitte sagen Sie mir.

Mit freundlichen Grüßen Marco

Answer 1

Sie haben die image plugin für TinyMCE verwenden und file_picker Eigenschaften und Rückrufe, so dass Sie Dateien von Client-Seite anhängen können, anstatt URL.

tinymce.init({ 
    // Include image plugin on plugin list 
    plugins: [ 'image'], 
    // Include image button on toolbar 
    toolbar: ['image'], 
    // Enable title field in the Image dialog 
    image_title: true, 
    // Enable automatic uploads of images represented by blob or data URIs 
    automatic_uploads: true, 
    // URL of your upload handler 
    // (YOU SHOULD MAKE AN ENDPOINT TO RECEIVE THIS AND RETURN A JSON CONTAINING: {location: remote_image_url}) 
    images_upload_url: '/text_images', 
    // Here we add custom filepicker only to Image dialog 
    file_picker_types: 'image', 
    // And here's your custom image picker 
    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]; 

     // Note: Now we need to register the blob in TinyMCEs image blob 
     // registry. 
     var id = 'blobid' + (new Date()).getTime(); 
     var blobCache = tinymce.activeEditor.editorUpload.blobCache; 
     var blobInfo = blobCache.create(id, file); 
     blobCache.add(blobInfo); 

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

     input.click(); 
    } 
}); 

hinzufügen text_images auf Ihre route.rb Datei:

match "text_images" => "text_images#create", via: :post 

Und Ihre verarbeitend Aktion wie folgt erstellen:

def create 
    if params[:file].class == ActionDispatch::Http::UploadedFile 
     @image = Picture.new(image: params[:file]) 
     respond_to do |format| 
      if @image.save 
      format.json { render json: { "location": @image.image.url }.to_json, status: :ok } 
      else 
      format.json { render json: @image.errors, status: :unprocessable_entity } 
      end 
     end 
     end 
    end 

Dies ist eine sehr grobe Implementierung, sollten Sie es sicherer machen für Ihr Anwendungskontext, Validierung und Filterung großer oder ungültiger Dateien!

UPDATE: Es gab kürzlich eine Aktualisierung auf die Syntax für neue Versionen von TinyMCE für die onchange Funktion ein Ergebnis Leser Attribut auf der create-Methode des blobCache Objekt gehören:

 input.onchange = function() { 
     var file = this.files[0]; 

     var reader = new FileReader(); 
     reader.readAsDataURL(file); 
     reader.onload = function() { 
     // Note: Now we need to register the blob in TinyMCEs image blob 
     // registry. In the next release this part hopefully won't be 
     // necessary, as we are looking to handle it internally. 
     var id = 'blobid' + (new Date()).getTime(); 
     var blobCache = tinymce.activeEditor.editorUpload.blobCache; 
     var blobInfo = blobCache.create(id, file, reader.result); 
     blobCache.add(blobInfo); 

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