Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
14
rated 0 times [  17] [ 3]  / answers: 1 / hits: 15246  / 9 Years ago, mon, november 9, 2015, 12:00:00

So because there is absolutely no modern way of uploading images to tinymce in .net for free, I was thinking of maybe adding a file upload input in html then upload it to server using ajax and then include the file in tinymce editor.



The problem is injecting image to tinymce, I don't know how to...



Is there any way?


More From » asp.net-mvc

 Answers
45

Ok, Micro$oft or someone else needs to really do something about this, in the mean time here is the result of hours of debugging:



This solution uses direct upload function (already there in Tinymce but disabled by default) and with some jquery hack we inject the image into textarea.



Changing dimensions must be done after injecting the image. In the recent versions of Tinymce they also added some nice image editing tools that also work with this method.



Now the code:



This is the action that needs to be placed in a 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 generate a text box and a couple of hidden fields. It will also make an instance of tinymce with some 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 named Images in your project root for uploading images. You also need Tinymce js file and jquery.



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



You may also choose to use html helpers. I don't like them. but go ahead and use those instead of this handmade form if you like.



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



I will keep working on this in the next few days and will edit this answer if necessary.


[#64458] Friday, November 6, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
mercedez

Total Points: 525
Total Questions: 103
Total Answers: 102

Location: Trinidad and Tobago
Member since Fri, Mar 24, 2023
1 Year ago
;