Simple CKEditor MVC EditorTemplate

I like using wysiwyg editors in my projects. It gives the user a lot of freedom in creating content.

There are a lot of wysiwyg editors, like TinyMCE, CKEditor, etc. I prefer CKEditor (formerly known as FCKEditor), because it is flexible, extendible, has a lot of plugins and creates clean (and customizable) html.

Most of my projects are MVC projects and I created a simple solution for using the CKEditor for content properties of my model.

First I mark the Properties in my model as html Properties by using the UIHint attribute.

public class Page
{
    public string Title { get; set; }

    public string SubTitle { get; set; }

    [UIHint("html")]
    public string Content { get; set; }
}

The UIHint attribute is part of the System.ComponentModel.DataAnotations namespace and can be combined with any other (MVC) attribute.

Now we need to create a view for this model:

@model MvcApplication1.Models.Page

<h2>Create new Page</h2>

<div>
    @Html.EditorForModel()
</div>

This will render an input for every property in the model. In this case, three inputs of type texy are rendered, because the type of the three properties in the Page model are strings and the application does not know how to handle the “html” value in the UIHint attribute of the Content Property.

By calling Html.EditorForModel all properties in the provided model are rendered. The attributes influence the rendering of the properties. The UIHint attribute lets you change which template is used for rendering this property. MVC searches for templates in the EditorTemplates folder. It searches in the controller folder for an EditorTemplates folder. When this folder is not found, it searches in the Shared folder for an EditorTemplates folder. When no folder is found, it will use the default template for the type of this property. When an EditorTempaltes folder is found, it will look for an html.csharp file. This is because of the value in the UIHint attribute. I want to use the html editor for every controller, so I place the html.csharp file in the Shared/EditorTemplates folder. It is also possible to override any default template, so you can make your own template for strings by creating a string.cshtml file and place it in the EditorTemplates.

When calling Html.DisplayForModel (or Html.DisplayFor), it searches in the DisplayTemplates folder. This has the same fallback scenario as described above for EditorTemplates.

My html.csharp file contains the following code:


@model String

@Html.TextArea("", Model, new { @class = "htmleditor" })

<script type="text/javascript">
    $(document).ready(function () {
        var id = "@ViewData.TemplateInfo.HtmlFieldPrefix";
        var instance = CKEDITOR.instances[id];
        if (instance) {
            delete CKEDITOR.instances[id];
        }
        $("#" + id).ckeditor();
    });
</script>

This creates a new instance of the CKEditor and deletes the old instance if exists.

The following two tabs change content below.
I'm a software developer from Utrecht. Interested in DDD, continuous delivery, new technologies & frameworks.

Latest posts by Vincent Keizer (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *