無料</strong>ため<strong>.NETでTinyMCEのために画像をアップロードする<strong>絶対に</strong>何<strong>現代</strong>方法がないので、どのようにAsp.net MVC

Question

を使用して4をTinyMCEの画像をアップロードして注入するためには、私は多分、ファイルを追加することを考えていましたHTMLで入力をアップロードし、ajaxを使用してサーバーにアップロードし、ファイルをtinymceエディターに組み込みます。

問題はTinyMCEの画像を注入され

、私は...

は、どのような方法がありますする方法がわかりませんか？

Answer 1

[OK]を、マイクロの$しばしばまたは他の誰かが本当にこのことについて何かをする必要があり、その間に、ここでデバッグの時間の結果である：

このソリューションは、TinyMCEの中に既に存在（ダイレクトアップロード機能を使用していますが、無効にデフォルトでは）、jqueryハックではイメージをテキストエリアに挿入します。

寸法を変更するには、画像を注入した後に行う必要があります。最近のバージョンの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の最新バージョンで動作するように書き直しました。

私は今後数日間この問題に取り組み、必要に応じてこの回答を編集します。

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

CSHARPコードで：

Answer 2

は私が入れ、これらのオプション、tinymce.initで

TinyMCEの4.3.10でこれをやった

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

コピーすることができるはずとあなたのテキストエリアに画像を貼り付けます（奇妙なドラッグアンドドロップはもうできません）。

Answer 3

これはtinymceの最新バージョンのための私の設定です。

File_browser_callbackは

を減価償却される..andそれは、画像を挿入、コピーペーストで作品をworks..this。私は私が私のためにうまく働いたのjavascript怒鳴る tynymce.initでJSF/Java Webアプリケーションと、このコードで働いていたファイルのアップロードマネージャで

  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

を試していません。 画像はテキストフィールドの中央に保存されています（私はそうです）。私は余分なコードの必要はないと思います。

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