如何上傳和使用Asp.net MVC

Question

所以因爲絕對上傳圖片沒有現代的方式在.NET TinyMCE的免費，我在想，也許的添加文件注入圖像TinyMCE的4在html中上傳輸入，然後使用ajax將其上傳到服務器，然後將文件包含在tinymce編輯器中。

問題是注射圖像TinyMCE的，我不知道該怎麼...

有什麼辦法？

Answer 1

好吧，微$經常和別人需要真正做點什麼，在這裏的平均時間是調試的時間結果：

該解決方案在TinyMCE的，但殘疾人使用直接上傳功能（已經在那裏默認情況下）和一些jquery hack我們注入圖像到textarea。

更改尺寸必須在注入圖像後完成。在最近的Tinymce版本中，他們還添加了一些不錯的圖像編輯工具，這些工具也適用於這種方法。

現在代碼：

這是一個需要被放置在一個控制器的操作：（心靈路由）

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>"; 
    } 

這是TinyMCE的完整代碼，它會產生一個文本框和幾個隱藏的字段。它還將啓用一些插件的tinymce實例。

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

你需要做一個文件夾命名爲「圖像」在你的項目根目錄上傳圖片。您還需要Tinymce js文件和jquery。

根據您的設置更改表單的動作！

您也可以選擇使用html助手。我不喜歡他們。但如果您願意，請繼續使用這些手工製作的表格。

這個想法是從here，但它是在Python中完成的，所以我重寫了它與ASP.NET MVC5和最新版本的TinyMCE一起工作。

我會在接下來的幾天繼續努力，並會在必要時編輯此答案。

Answer 2

我這樣做是在TinyMCE的4.3.10

在tinymce.init，把這些選項：

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

在CSHARP代碼：

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

你應該能夠複製和粘貼圖像到你的textarea（奇怪，拖放不再工作）。

Answer 3

這是我配置的最新版本的tinymce ..

File_browser_callback折舊

..和它的複製粘貼works..this作品，插入圖片。我沒有tynymce.init JavaScript的波紋管爲我工作得很好文件上傳經理又

  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

我在JSF/Java Web應用程序工作，該代碼嘗試。 圖片保存在文本字段的中間（我想）。我想有沒有需要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', 
    });