Basic Razor with TinyMce Editor PostMode

TinyMce Sourceforge
TinyMce Sourceforge

To update the sites using the latest technology, I found  TinyMCE , a great Javascript WYSIWYG Editor. I am not an expert using Razor but after many tries, I realize out how to implement (in post mode, without using ajax).

    Download it and copy the script files to your Scripts folder in your solution.
    Create the PageModel class in Models folder to store the Content and IsEditing property
public class PageModel
    {
        public bool IsAuthenticated { get; set; }
        public bool IsEditing { get; set; }
        public string Content { get; set; }
        public string ContentParsed { 
          get { return HttpUtility.HtmlEncode(Content); } }
    }
    In the controller for the view we have to add the method to show the view:
public ActionResult Where(PageModel page)
        {
            if (page != null && !page.IsEditing)
            {
                page.Content = IOHelper.ReadHtml("where");
            }
            return View(page);
        }
    The method to edit the content:
public ActionResult Edit(string elm1)
        {
            return View("Where", new PageModel() 
            { IsEditing = true, 
              Content = IOHelper.ReadHtml("where") 
             });
        }
    The method to save the content:
        [HttpPost]
        [ValidateInput(false)]
        public ActionResult Post(string elm1)
        {
            IOHelper.WriteHtml("where", elm1);
            return View("Where", new PageModel() 
             { IsEditing = false, Content = elm1 });
        }

Finally in the view we have to add the if statement in order to show IsEditing or Raw:

<div>
@if (Model.IsEditing == false)
{
    @Html.ActionLink("Editar", "Edit");
    <br />
    @Html.Raw(Model.Content);
}
 
else
{
 
<script type="text/javascript" src="@Url.Content("~/Scripts/tiny_mce/jquery.tinymce.js")"></script>
<script type="text/javascript">
    $().ready(function () {
        $('textarea.tinymce').tinymce({
            // Location of TinyMCE script
            script_url: '../Scripts/tiny_mce/tiny_mce.js',
 
            // General options
            theme: "advanced",
            plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
 
            // 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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
            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/content.css",
 
            // Drop lists for link/image/media/template dialogs
            template_external_list_url: "lists/template_list.js",
            external_link_list_url: "lists/link_list.js",
            external_image_list_url: "lists/image_list.js",
            media_external_list_url: "lists/media_list.js",
 
            // Replace values for the template plugin
            template_replace_values: {
                username: "Some User",
                staffid: "991234"
            }
        });
    });
</script>
 
 
 
    using (Html.BeginForm("Post", "About", FormMethod.Post, new { id = "searchForm" }))
      {
    <fieldset>
			<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%" class="tinymce">
				@Html.Raw(Model.ContentParsed)
			</textarea>
        <input type="submit" name="save" value="Aplicar" />
		<input type="reset" name="reset" value="Cancelar" />
    </fieldset>
                               }
}
</div>

Of course it is better to add the javascript function apart, and generalize the methods in some way to make it more scalable.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s