Come caricare e iniettare immagine di TinyMCE 4 con Asp.net MVC

Question

Quindi perché non v'è assolutamente senza moderna modo di caricare immagini per TinyMCE in .net gratis, stavo pensando forse di aggiungere un file carica l'input in html quindi caricalo sul server usando ajax e quindi includi il file nell'editor di tinymce.

Il problema sta iniettando immagine di TinyMCE, non so come ...

Esiste un modo?

Answer 1

Ok, Micro $ oft o qualcun altro ha bisogno di fare davvero qualcosa per questo, nel frattempo ecco il risultato di ore di debugging:

Questa soluzione utilizza la funzione caricamento diretto (già lì in TinyMCE ma disabilitato di default) e con un po 'di jquery abbiamo iniettato l'immagine in textarea.

La modifica delle dimensioni deve essere effettuata dopo l'iniezione dell'immagine. Nelle recenti versioni di Tinymce hanno anche aggiunto alcuni strumenti di modifica delle immagini che funzionano anche con questo metodo.

Ora il codice:

Questa è l'azione che deve essere collocato in un controllore: (Mind the Routing)

public string Upload(HttpPostedFileBase file) 
    { 
     string path; 
     string saveloc = "~/Images/"; 
     string relativeloc = "/Images/"; 
     string filename = file.FileName; 

     if (file != null && file.ContentLength > 0 && file.IsImage()) 
     { 
      try 
      { 
       path = Path.Combine(HttpContext.Server.MapPath(saveloc), Path.GetFileName(filename)); 
       file.SaveAs(path); 
      } 
      catch (Exception e) 
      { 
       return "<script>alert('Failed: " + e + "');</script>"; 
      } 
     } 
     else 
     { 
      return "<script>alert('Failed: Unkown Error. This form only accepts valid images.');</script>"; 
     } 

     return "<script>top.$('.mce-btn.mce-open').parent().find('.mce-textbox').val('" + relativeloc + filename + "').closest('.mce-window').find('.mce-primary').click();</script>"; 
    } 

E questo è il codice completo per TinyMCE, verrà generato un casella di testo e un paio di campi nascosti. Creerà anche un'istanza di tinymce con alcuni plugin abilitati.

<iframe id="form_target" name="form_target" style="display:none"></iframe> 

<form id="my_form" action="/admin" target="form_target" method="post" enctype="multipart/form-data" style="width:0;height:0;overflow:hidden"> 
    <input name="file" type="file" onchange="$('#my_form').submit();this.value='';"> 
</form> 
<script type="text/javascript"> 
tinymce.init({ 
    selector: "textarea", 
    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" 
    ], 
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
    toolbar2: "print preview media | forecolor backcolor emoticons | ltr rtl", 
    image_advtab: true, 
    templates: [ 
     {title: 'Test template 1', content: 'Test 1'}, 
     {title: 'Test template 2', content: 'Test 2'} 
    ], 
    file_browser_callback: function(field_name, url, type, win) { 
    if(type=='image') $('#my_form input').click(); 
} 
}); 
</script> 

<textarea id="my_editor" class="mceEditor">This will be an editor.</textarea> 

Hai bisogno di fare una cartella denominata "Immagini" nella root del progetto per il caricamento delle immagini. Hai anche bisogno di Tinymce js file e jquery.

Modificare l'azione del modulo in base alla configurazione !!!

Si può anche scegliere di utilizzare helper HTML. Non mi piacciono ma vai avanti e usa quelli invece di questa forma fatta a mano se vuoi.

L'idea è da here ma è stata eseguita in python, quindi l'ho riscritta per funzionare con ASP.NET MVC5 e l'ultima versione di TinyMCE.

Continuerò a lavorare su questo nei prossimi giorni e modificherò questa risposta se necessario.

Answer 2

Ho fatto questo in TinyMCE 4.3.10

In tinymce.init, mettere queste opzioni:

paste_data_images: true, 
images_upload_url: '/YourController/UploadImage', 
images_upload_base_path: '/some/basepath' 

nel codice CSharp:

public ActionResult UploadImage(HttpPostedFileBase file) 
{ 
    file.SaveAs("<give it a name>"); 
    return Json(new { location = "<url to that file>" }); 
} 

si dovrebbe essere in grado di copiare e incolla l'immagine nella tua textarea (strano, trascina e rilascia non funziona più).

Answer 3

questa è la mia configurazione per l'ultima versione di tinymce ..

File_browser_callback è ammortizzato

..e si works..this lavori sulla copia incolla, inserire un'immagine. Non ho provato con upload di file ancora direttore

  automatic_uploads: true, << auto run your upload script 

     images_upload_url: 'ImageUpload', <<your upload, I'm using mvc and I'm routing to "ImageUpload" 

     images_reuse_filename:true, << this is where the return json from your code i had a hard time finding this out. 

     file_picker_types: 'image', << type where the upload will appear images dialog,link or file 

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

     // Note: In modern browsers input[type="file"] is functional without 
     // even adding it to the DOM, but that might not be the case in some older 
     // or quirky browsers like IE, so you might want to add it to the DOM 
     // just in case, and visually hide it. And do not forget do remove it 
     // once you do not need it anymore. 

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

      // 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); 
      blobCache.add(blobInfo); 
      console.log(id); 
      console.log(blobCache); 
      // call the callback and populate the Title field with the file name 
      cb(blobInfo.blobUri(), { title: file.name }); 
      console.log(meta.filetype); 



     }; 

     input.click(); 


    }, 

Answer 4

Io lavoro in un'applicazione web JSF/Java e questo codice in tynymce.init javascript muggito funzionato bene per me. Le immagini vengono salvate nel mezzo del campo di testo (suppongo). Credo che non c'è bisogno per il codice aditional

tinymce.init({ 
     selector: "textarea", 
     browser_spellcheck: true, 
     paste_data_images: true, 
     plugins: [ 
     "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", 
     "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", 
     "table contextmenu directionality template textcolor paste fullpage textcolor colorpicker textpattern" 
     ], 

     toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | formatselect fontselect fontsizeselect", 
     toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image code | insertdatetime preview | forecolor backcolor", 
     toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", 

     menubar: false, 
     image_advtab: true, 
     toolbar_items_size: 'small', 

     file_picker_callback: function(callback, value, meta) { 
      if (meta.filetype == 'image') { 
       var inputFile = document.createElement("INPUT"); 
       inputFile.setAttribute("type", "file"); 
       inputFile.setAttribute("style","display: none"); 
       inputFile.click(); 
       inputFile.addEventListener("change", function() { 
       var file = this.files[0]; 
       var reader = new FileReader(); 
       reader.onload = function(e) { 
        callback(e.target.result, { 
        alt: '' 
        }); 
       }; 
       reader.readAsDataURL(file); 
      }); 
      } 
     }, 

     insertdatetime_dateformat: "%d/%m/%Y", 
     insertdatetime_timeformat: "%H:%M:%S", 
     language: 'pt_BR', 
    });