Wie zum Hochladen und Bild zu injizieren Asp.net MVC

Question

So TinyMCE 4 mit, weil es absolut keine moderne Möglichkeit, Bilder hochzuladen kostenlos in .net TinyMCE, dachte ich an vielleicht das Hinzufügen einer Datei lade die Eingabe in html hoch, lade sie mit ajax auf den Server hoch und füge die Datei dann in den tinymce-Editor ein. TinyMCE

Das Problem Bild gespritzt wird, weiß ich nicht, wie man ...

Gibt es eine Möglichkeit?

Answer 1

Ok, Micro $ oft oder jemand anderes tun, etwas über das muss wirklich, hier in der Zwischenzeit ist das Ergebnis der Stunden der Fehlersuche:

Diese Lösung verwendet Funktion direkte Upload (bereits dort in TinyMCE aber deaktiviert standardmäßig) und mit etwas jquery hack injizieren wir das image in textarea.

Ändern der Abmessungen muss nach dem Einbringen des Bildes erfolgen. In den letzten Versionen von Tinymce haben sie auch einige schöne Bildbearbeitungswerkzeuge hinzugefügt, die auch mit dieser Methode funktionieren.

Jetzt ist der Code:

Dies ist die Aktion, die in einer Steuerung gelegt werden muss: (Beachten Sie den 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>"; 
    } 

Und das ist der vollständige Code für TinyMCE, wird es eine generieren Textfeld und ein paar versteckte Felder. Es wird auch eine Instanz von Tinymce mit einigen Plugins aktiviert.

<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> 

Sie benötigen für das Hochladen von Bildern eines Ordner mit dem Namen „Bilder“ in Ihrem Projekt Wurzel zu machen. Sie brauchen auch Tinymce Js-Datei und Jquery.

Ändern Sie die Aktion des Formulars entsprechend Ihrer Einrichtung !!!

Sie können auch HTML-Helfer verwenden. Ich mag sie nicht. aber gehen Sie voran und verwenden Sie diese anstelle dieser handgemachten Form, wenn Sie mögen.

Die Idee ist von here, aber es wurde in Python getan, also habe ich es umgeschrieben, um mit ASP.NET MVC5 und Neueste Version von TinyMCE zu arbeiten.

Ich werde in den nächsten Tagen weiter daran arbeiten und werde diese Antwort bei Bedarf bearbeiten.

Answer 2

Ich tat dies in TinyMCE 4.3.10

In tinyMCE.init, setzen Sie diese Optionen:

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

In CSharp Code:

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

Sie sollten in der Lage sein, zu kopieren und Bild in das Textfeld einfügen (merkwürdig, Drag & Drop funktioniert nicht mehr).

Answer 3

dies ist meine konfiguration für die neueste version von tinymce ..

File_browser_callback wird

abgeschrieben

..und es works..this Werke kopieren und einfügen, Bild einfügen. Ich habe nicht mit Datei-Upload-Manager versucht noch

  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

ich in einer JSF/Java Web-Anwendung arbeiten und diesen Code in tynymce.init javascript unten gut für mich gearbeitet. Die Bilder werden in der Mitte des Textfelds gespeichert (nehme ich an). Ich denke, es gibt keine Notwendigkeit für aditional Code

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', 
    });