[RESOLVED]Can I use the latest version of TinyMce with mvc5?

Controller, CSS, HTML, Image, Nuget, Post, Table, View, Web Forms, , , , , , , ,

I guess the subjects says it all but has anyone done this and if so is there a tutorial anywhere?

Cheers,

Mike.

tinymce is strictly  client side. Its works with any server code. see the tutorials on their site. server side it just a textarea.

  @Html.TextArea("nameOfField")

be sure to add [AllowHtml] to the post back model field.

Yes but I need to use @Html.EditorFor to populate the TextArea with the data in an Edit view.

As Bruce mentions, the TinyMCE Editor is purely client-side and has nothing to do with MVC specifically. You should be able to use it as long as you have any fields that generate a <textarea> element.

It should be noted that you don’t have to use an Html.EditorFor() helper to populate your element. You could explicitly use the Html.TextAreaFor() to ensure that an actual <textarea> element is rendered and then apply the appropriate client-side code to
initialize the TinyMCE.

Complete Example

  1. Create an Project that targets MVC 5.
  2. Add the latest TinyMCE Package via NuGet (Right-click Solution > Manage NuGet Packages > Search for "TinyMCE" > Install the first "TinyMCE" package that appears).
  3. Create an Example Controller with a class that will be equivalent to your Model as seen below : 
    public class TinyMCEController : Controller
{
        // An action to display your TinyMCE editor
        public ActionResult Index()
        {
            return View();
        }

        // An action that will accept your Html Content
        [HttpPost]
        public ActionResult Index(ExampleClass model)
        {
            return View();
        }
}

// An example class to store your values
public class ExampleClass
{
        // This attributes allows your HTML Content to be sent up
        [AllowHtml]
        public string HtmlContent { get; set; } 

        public ExampleClass()
        {

        }
}
  4. Create a View that will wire up your TinyMCE Editor and will contain the necessary code to post your HTML content : 
    <!-- This View uses your Model -->
@model TinyMCE.Controllers.ExampleClass
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TinyMCE Example</title>
    <!-- TinyMCE Script Reference -->
    <script src="~/scripts/tinymce/tinymce.min.js"></script>
    <!-- Script to wire up your TinyMCE editor -->
    <script type="text/javascript">
        // Initialize your tinyMCE Editor with your preferred options
        tinyMCE.init({
            // General options
            mode: "textareas",
            theme: "modern",
            // Theme options
            theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
            theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
            theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: true,

            // Example content CSS (should be your site CSS)
            content_css: "css/example.css",
        });
    </script>
</head>
<body>
    <!-- This will automatically post to your Index method (that is decorated with a HttpPost attribute) -->
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        <div>
            <!-- This will contain your HtmlContent and use the TinyMCE editor-->
            @Html.TextAreaFor(model => model.HtmlContent)
           
            <input type="submit" value="Create" />
        </div>
    }
</body>
</html>
  5. Now if you navigate to your Index Action, you should see the following :
  6. And then if you Submit it, you should see your HTML Content available in your Controller :

This should be all you need to wire everything up.

Thanks Rion,

That was easier than installing the MVC version Smile

Cheers,

Mike

Leave a Reply