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

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