TinyMCE images MVC5 not working on edit

Question

I used this helpful post to assist building my functions.

TinyMCE images working well on Creating content and it displays nice in my Details view (Create and Details actions).

When I try and edit an entry, the TinyMCE editor does not display uploaded images, and it does not let me upload more images in the EDIT action.

Here is the TinyMCE initialization:

$(document).ready(function () {
            tinymce.init({
                selector: '#mytextarea',
                //plugins:["image"],
                plugins: [
        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "table contextmenu directionality emoticons template textcolor paste textcolor colorpicker textpattern"
                ],
                toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
                toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | insertdatetime preview | forecolor backcolor",
                toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | visualchars visualblocks nonbreaking template pagebreak restoredraft",
                images_upload_url: "TinyMceUpload",
                branding: false,
            });            
        });

Here is the code on the controller for Uploading images:

//Image upload
        [HttpPost]
        public ActionResult TinyMceUpload(HttpPostedFileBase file)
        {
            //Response.AppendHeader("Access-Control-Allow-Origin", "*");
            //var location = SaveFile(Server.MapPath("~/Areas/Discussion/Content/Images/"), file);
            var location = SaveFile(Server.MapPath("~/Content/Images/Discussions/Article/"), file);

            return Json(new { location }, JsonRequestBehavior.AllowGet);
        }

                    private static string SaveFile(string targetFolder, HttpPostedFileBase file)
        {
            const int megabyte = 1024 * 1024;

            if (!file.ContentType.StartsWith("image/"))
            {
                throw new InvalidOperationException("Invalid MIME content type.");
            }

            var extension = Path.GetExtension(file.FileName.ToLowerInvariant());
            string[] extensions = { ".gif", ".jpg", ".png", ".svg", ".webp" };
            if (!extensions.Contains(extension))
            {
                throw new InvalidOperationException("Invalid file extension.");
            }

            if (file.ContentLength > (12 * megabyte))
            {
                throw new InvalidOperationException("File size limit exceeded.");
            }
            //string usr = UserIDString();
            var fileName = file.FileName + DateTime.Now.ToString("yyyyMMddHHmmssfff") + extension;
            //var fileName = Guid.NewGuid() + extension;
            var path = Path.Combine(targetFolder, fileName);
            file.SaveAs(path);


            return Path.Combine("/Content/Images/Discussions/Article", fileName).Replace('\\', '/');
            //return Path.Combine("/Areas/Discussion/Content/Images", fileName).Replace('\\', '/');
        }

I thought it might have something to do with the folder I was choosing or the use of GUID so that is why some lines are commented. I noticed when I upload the image, and choose "Source Code" in the TinyMCE editor it shows up the same on both edit and create, but it only displays the content on Create, perhaps it has something to do with the TINYMCE not being fully initialized...

Also, if in "Source Code" in the editor as mentioned above while in editor mode and get ride of the leading "../.." on the image links (below) then it will display the image properly, however it still doesn't let me upload images in the edit action. I get HTTP 500 error on EDIT uploading images.

I do not know if the two issues are related. If anyone can help me with either issue I am grateful.

EDIT:

<img src="../../Content/Images/Discussions/Article/20180124121058299.png" alt="" width="240" height="240" />

Create:

<img src="../../Content/Images/Discussions/Article/20180124121208500.png" alt="" width="545" height="134" />

It has something to do with routes, i noticed that when I changed the URL to "/Discussions/Article/TinyMCEUpload" the 500 error goes away, but i still have the problem with image uploads....working on it — dave317
WAS SO EASY. Had to set relative_urls to false in the config initialization. — dave317

Unknown Unknown · Accepted Answer · 2018-01-28T23:19:20

You're going to want to set relative_urls to false in your config. That is what's messing with your image paths.

TinyMCE images MVC5 not working on edit

1 Answers