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

Question

因为绝对没有现代的方式在.net中免费上传图像,我想在html中添加文件上传输入然后使用ajax将其上传到服务器然后在tinymce编辑器中包含该文件.

问题是注入图像到tinymce,我不知道如何...

有什么办法吗？

Answer 1

我是在TinyMCE 4.3.10中做到的

在tinymce.init中,放置以下选项:

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

在CSharp代码中:

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

您应该能够将图像复制并粘贴到textarea(奇怪的是,拖放不再起作用).

Answer 2

好的,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助手.我不喜欢他们.但如果你愿意,可以继续使用这些而不是这种手工制作的形式.

这个想法是从这里开始的,但它是在python中完成的,所以我重新编写它以使用ASP.NET MVC5和最新版本的TinyMCE.

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