How to upload and enter an image in tinymce 4 using Asp.net MVC

Question

Since there is absolutely no modern way to upload images to tinymce in .net for free , I thought that maybe the file uploads the input to html and then uploads it to the server using ajax and then includes the file in the tinymce editor.

The problem is introducing the image into tinymce, I don't know how ...

Is there any way?

Answer 1

Ok, Micro $ oft or someone else needs to do something with this, at the same time, this is the result of debugging hours:

This solution uses the direct download function (already exists in Tinymce, but disabled by default), and using some jquery hack we add the image to the text box.

Resizing should be done after image injection. In recent versions of Tinymce, they have also added some good image editing tools that also work with this method.

Now the code:

This is an action that needs to be placed in the controller: (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>"; } 

And this is the complete code for Tinymce, it will create a text field and a couple of hidden fields. It will also make an instance of tinymce with plugins enabled.

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

You need to make a folder called "Images" in the root directory of the project to upload images. You also need a Tinymce js and jquery file.

Change the action of the form according to your setting !!!

You can also use html helpers. I do not like them. but go and use them instead of this handmade work if you want.

The idea is from here , but it was done in python, so I rewrote it to work with ASP.NET MVC5 and the latest version of TinyMCE.

I will continue to work on this in the next few days and edit this answer if necessary.

Answer 2

I did it in TinyMCE 4.3.10

In tinymce.init, enter the following parameters:

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

You can copy and paste images into your text space (strange, drag and drop no longer works).

Answer 3

This is my configuration for the latest version of tinymce.

File_browser_callback depreciates

.. and it works .. it works with the copy, paste the image. I have not tried with file upload manager yet

  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

I am working in a JSF / Java web application and this code in tynymce.init javascript below worked fine for me. Images are saved in the middle of the text box (I suppose). I think there is no need for additional 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', });