CODEWITHSUNDEEP
htmlasp.net-mvc-4tinymce
Nicholas Magnussen
Nicholas Magnussen

Reputation: 769

TinyMCE is not working correctly in MVC4

I'm in a bit of a bind here. I'm trying to use TinyMCE as a text editor in my MVC4 project.

It's pretty simple so far, I just need to be able to show the editor correctly.

I have 2 classes of importance.

The controller:

public class RapportController : Controller
{
    ImageHandler handler = ImageHandler.Instance;
    IDictionary<string, System.Drawing.Image> pics = ImageHandler.Instance.SharedCollection.GetCollection();

    public ActionResult Index()
    {
        return View(handler.SharedCollection.GetCollection().Values.ToList());
    }

    public void GetImage(string name)
    {
        using (MemoryStream s = new MemoryStream())
        {
            pics[name].Save(s, System.Drawing.Imaging.ImageFormat.Png);
            System.Web.Helpers.WebImage webImg = new System.Web.Helpers.WebImage(s);
            webImg.Write();
        }
    }

Then there's the view, which is where I'm trying to make TinyMCE work:

@model IList<System.Drawing.Image>

@{ ViewBag.Title = "Index"; }

Rapport

tinyMCE.init({ mode: "textareas", theme: "advanced", plugins: "emotions,spellchecker,advhr,insertdatetime,preview", // Theme options - button# indicated the row# only theme_advanced_buttons1: "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect", theme_advanced_buttons2: "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor", theme_advanced_buttons3: "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", theme_advanced_statusbar_location: "bottom", theme_advanced_resizing: true });


This is some content that will be editable with TinyMCE. 

<div class="float-right">
    <ul id="images">
        @foreach (System.Drawing.Image item in Model) 
        {
            MemoryStream stream = new MemoryStream();    
            item.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
            stream.Seek(0, SeekOrigin.Begin);
            string base64 = Convert.ToBase64String(stream.ToArray());
            <li>                 
                <a href="JavaScript:newPopup('data:image/gif;base64,@base64');"><img height="100" width="200" src="data:image/gif;base64,@base64"/></a>             
            </li>
        }
    </ul>
</div>

// Popup window code function newPopup(url) { popupWindow = window.open( url, 'popUpWindow', 'height=600,width=1100,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes') }

For some reason, that ends up looking like this: How it looks

Any idea why I don't get any of the functionality from TinyMCE?

Thank you in advance :)

Upvotes: 1

Views: 654

Answers (1)

Nicholas Magnussen
Nicholas Magnussen

Reputation: 769

Figured it out. You're not allowed to use a local path, when defining where TinyMCE is located.

Upvotes: 1

Related Questions