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
- Create an Project that targets MVC 5.
- Add the latest TinyMCE Package via NuGet (Right-click Solution > Manage NuGet Packages > Search for "TinyMCE" > Install the first "TinyMCE" package that appears).
- 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() { } }
- 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>
- Now if you navigate to your Index Action, you should see the following :
- 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
Cheers,
Mike