javascript – 如何使用Asp.net MVC上传和注入图像到tinymce 4

因为绝对没有现代的方式在.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.

我将在接下来的几天内继续研究这个问题,并在必要时编辑这个答案.