There is not yet a nuget package available for the new version of TinyMCE ( version 4 ) so I build it myself:

I like the new skin and inline editing posibilities of TinyMCE version 4, because there was not yet a Nuget package available I decided to build one:

Download the TinyMCE source files from codeplex. Copy the whole tinymce directory into your scripts directory. Reference the tinymce.min.js javascript file in one of your bundles.

Decorate your property in your model wich has to be editted by TinyMCE with a UI hint:

    public class Aantekeningen:BaseModel
        [HiddenInput(DisplayValue = false)]
        public int AantekeningId { get; set; }

        [Required(ErrorMessage = "Dit veld is verplicht")]
        public string Aantekening { get; set; }

Create in your Views Shared directory a new directory with the name EditorTemplates. In this directory create a view with the same name as the UIhint.

Use the following javascript to initialize TinyMCE:

<script type="text/javascript">
    (function () {
                mode: "exact",
                elements: "@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
                plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste "
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"

@Html.TextArea(string.Empty, /* Name suffix */
    ViewData.TemplateInfo.FormattedModelValue /* Initial value */

Or wait for a Nuget package :-)




Saving your comment....

Naam is verplicht!
Email is verplicht!
Opmerking is verplicht!