因为绝对没有现代的方式在.net中免费上传图像,我想在html中添加文件上传输入然后使用ajax将其上传到服务器然后在tinymce编辑器中包含该文件.
问题是注入图像到tinymce,我不知道如何…
有什么办法吗？
解决方法
好的,Micro $oft或其他人需要真正做些什么,这里的平均时间是调试时间的结果：
这个解决方案使用直接上传功能(已经在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>
您需要在项目根目录中创建名为“Images”的文件夹以上载图像.你还需要Tinymce js文件和jquery.
根据您的设置更改表单的操作！
您也可以选择使用html助手.我不喜欢他们.但如果你愿意,可以继续使用这些而不是这种手工制作的形式.
这个想法是从here开始的,但它是在python中完成的,所以我重新编写它以使用ASP.NET MVC5和最新版本的TinyMCE.
我将在接下来的几天内继续研究这个问题,并在必要时编辑这个答案.