如何使用Asp.net MVC上传图像并将其注入tinymce 4 [英] How to upload and inject image to tinymce 4 using Asp.net MVC

问题描述

因此，由于没有绝对，没有现代的免费将图像上传到 .net中的tinymce的方式，我在考虑添加一个使用html文件上传输入，然后使用ajax将其上传到服务器，然后将文件包含在tinymce编辑器中.

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.

问题是将图像注入tinymce，我不知道如何...

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

有什么办法吗?

推荐答案

好吧，Micro $ oft或其他人需要对此真正做些事情，同时这是经过数小时调试的结果:

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:

此解决方案使用直接上传功能(在Tinymce中已经存在，但默认情况下已禁用)，并且通过一些jquery hack，我们将图像注入到textarea中.

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.

更改尺寸必须在注入图像后进行.在Tinymce的最新版本中，他们还添加了一些不错的图像编辑工具，这些工具也可以使用此方法.

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.

现在输入代码:

这是需要放置在控制器中的动作:(注意路由)

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

这是Tinymce的完整代码，它将生成一个文本框和几个隐藏字段.它还将成为启用了某些插件的tinymce的实例.

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>

您需要在项目根目录中创建一个名为"Images"的文件夹以上传图像.您还需要Tinymce js文件和jquery.

根据您的设置更改表单的操作！

您也可以选择使用html帮助器.我不喜欢他们但请继续使用这些样式，而不是手工制作的样式.

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.

该想法来自此处，但是它是在python中完成的，因此我将其重写为可与ASP.NET MVC5和TinyMCE的最新版本一起使用.

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.

这篇关于如何使用Asp.net MVC上传图像并将其注入tinymce 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！