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

How to upload and inject image to tinymce 4 using Asp.net MVC

提问by Vahid Amiri

So because there is absolutelyno modernway 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.

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

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

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

Is there any way?

有什么办法吗？

采纳答案by Vahid Amiri

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:

好的，Micro$oft 或其他人需要真正为此做点什么，同时这里是数小时调试的结果：

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 中已经存在，但默认情况下禁用）并通过一些 jquery hack 我们将图像注入 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.

必须在注入图像后更改尺寸。在 Tinymce 的最新版本中，他们还添加了一些同样适用于这种方法的不错的图像编辑工具。

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.

这是 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>

You need to make a folder named "Images" in your project root for uploading images. You also need Tinymce js file and jquery.

您需要在项目根目录中创建一个名为“Images”的文件夹来上传图像。您还需要 Tinymce js 文件和 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.

您也可以选择使用 html 助手。我不喜欢他们。但是，如果您愿意，请继续使用它们而不是这种手工制作的表格。

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

这个想法来自这里，但它是在 python 中完成的，所以我重写了它以使用 ASP.NET MVC5 和最新版本的 TinyMCE。

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

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

回答by s k

I did this in TinyMCE 4.3.10

我在 TinyMCE 4.3.10 中做了这个

In tinymce.init, put these options:

在 tinymce.init 中，放置以下选项：

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

In CSharp code:

在 CSharp 代码中：

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

You should be able to copy and paste image to your textarea (strange, drag and drop doesn't work anymore).

您应该能够将图像复制并粘贴到您的文本区域（奇怪，拖放不再起作用）。

回答by CyberNinja

this is my config for the latest version of tinymce..

这是我最新版本的 tinymce 的配置..

File_browser_callback is depreciated

File_browser_callback 已折旧

..and it works..this works on copy paste,insert image. I haven't tried with file upload manager yet

..它有效......这适用于复制粘贴，插入图像。我还没有尝试过文件上传管理器

         automatic_uploads: true, << auto run your upload script

         images_upload_url: 'ImageUpload', <<your upload, I'm using mvc and I'm routing to "ImageUpload"

        images_reuse_filename:true, << this is where the return json from your code i had a hard time finding this out.  

       file_picker_types: 'image', << type where the upload will appear images dialog,link or file

        //custom file picker       
        file_picker_callback: function (cb, value, meta) {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');

        // Note: In modern browsers input[type="file"] is functional without 
        // even adding it to the DOM, but that might not be the case in some older
        // or quirky browsers like IE, so you might want to add it to the DOM
        // just in case, and visually hide it. And do not forget do remove it
        // once you do not need it anymore.

        input.onchange = function () {
            var file = this.files[0];

            // Note: Now we need to register the blob in TinyMCEs image blob
            // registry. In the next release this part hopefully won't be
            // necessary, as we are looking to handle it internally.
            var id = 'blobid' + (new Date()).getTime();
            var blobCache = tinymce.activeEditor.editorUpload.blobCache;
            var blobInfo = blobCache.create(id, file);
            blobCache.add(blobInfo);
            console.log(id);
            console.log(blobCache);
            // call the callback and populate the Title field with the file name
            cb(blobInfo.blobUri(), { title: file.name });
            console.log(meta.filetype);



        };

        input.click();


    },

回答by Dustan Cardoso

I work in a JSF/Java web application and this code in tynymce.initjavascript bellow worked fine for me. The pictures are saved in the middle of the text field (I suppose). I guess there's no need for aditional code

我在 JSF/Java Web 应用程序中工作，tynymce.initjavascript bellow 中的这段代码对我来说很好用。图片保存在文本字段的中间（我想）。我想不需要额外的代码

tinymce.init({
      selector: "textarea",
      browser_spellcheck: true,
      paste_data_images: true,
      plugins: [
        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "table contextmenu directionality template textcolor paste fullpage textcolor colorpicker textpattern"
      ],

      toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | formatselect fontselect fontsizeselect",
      toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image code | insertdatetime preview | forecolor backcolor",
      toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

      menubar: false,
      image_advtab: true,
      toolbar_items_size: 'small',

      file_picker_callback: function(callback, value, meta) {
          if (meta.filetype == 'image') {
                var inputFile = document.createElement("INPUT");
                inputFile.setAttribute("type", "file");
                inputFile.setAttribute("style","display: none");
                inputFile.click();
                inputFile.addEventListener("change", function() {
                var file = this.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                  callback(e.target.result, {
                    alt: ''
                  });
                };
                reader.readAsDataURL(file);
             });
          }
        },

      insertdatetime_dateformat: "%d/%m/%Y",
      insertdatetime_timeformat: "%H:%M:%S",
      language: 'pt_BR',
    });

回答by Paul

HTML

HTML

API_KEY - replace with yours for tinymce Selector - replace MVC Controller in 'Control' Area

API_KEY - 替换为你的 tinymce Selector - 替换“控制”区域中的 MVC 控制器

  <script src="https://cdn.tiny.cloud/1/API_KEY/tinymce/5/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: '#Body',
            menubar: ' edit view insert format tools table',
            toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist  | forecolor backcolor removeformat | emoticons | fullscreen  | image media  link | code',
            plugins: 'code importcss  searchreplace autolink   visualblocks visualchars fullscreen image link media   codesample table charmap hr  nonbreaking anchor toc insertdatetime advlist lists  wordcount   imagetools textpattern noneditable   charmap   quickbars  emoticons',
            contextmenu: "link image imagetools table",
            image_advtab: true,
            toolbar_sticky: true,
            images_upload_url: '/Control/Home/UploadImage',
            paste_data_images: true,
        });
    </script>

C#

C＃

namespace Project.Areas.Control.Controllers
{
    [Authorize(Roles = "admin")]
    public class HomeController : WebBaseController
    {

        [HttpPost]
        public JsonResult UploadImage(HttpPostedFileBase file)
        {
            var uploadsPath = HostingEnvironment.MapPath($"/uploads");
            var uploadsDir = new DirectoryInfo(uploadsPath);
            if (!uploadsDir.Exists)
                uploadsDir.Create();

            var imageRelativePath = $"/uploads/{DateTime.Now:yyyy-MM-dd_HH-mm-ss}.jpg";
            var imageAbsPath = HostingEnvironment.MapPath(imageRelativePath);
            var imageBytes = file.InputStream.ReadToEnd();
            System.IO.File.WriteAllBytes(imageAbsPath, imageBytes);
            return Json(new { location = imageRelativePath });
        }
.....

Extension Method

扩展方法

public static byte[] ReadToEnd(this Stream input)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                input.CopyTo(ms);
                return ms.ToArray();
            }
        }