Thanks Jason

I have tried to use the HttpUtility.UrlDecode, but unfortunately I get the content displayed as <p>Hello World</p>.

What am I missing?

This is my view code

@{

    Model.BodyText = HttpUtility.UrlDecode("%3Cp%3EHello%20World%3C/p%3E"); ;

    using (Html.BeginForm("email-template", "Email", FormMethod.Post, new { id = "frmOutputTemplate" }))

    {

        @Html.HiddenFor(m => m.Id)

        @(Html.Infragistics().

                HtmlEditorFor(m => m.BodyText).

                ID("htmlEditor").

                Render()

        )

    }

}

My script code;

$(function () {

    var height = $('html').hasClass('touch') ? 500 : 350;

    // initialize igHtmlEditor

    var htmlEditor = $("#htmlEditor").igHtmlEditor({

        width: "99%",

        height: height,

        inputName: "BodyText",

    });

});

So what you can do is store the model data in a JavaScript variable similar to the following:

var editorText = '@Html.Raw(Model.BodyText)';

Using Html.Raw here will make sure that the text comes through as markup without any encoding applied (this avoids the < being turned into &lt; for example). Once you have the data in the variable you can then apply it to the editor by setting the value property of the editor:

    $("#htmlEditor").igHtmlEditor({
        width: "99%",
        height: height,
        inputName: "BodyText",
        value: editorText,
        showCopyPasteToolbar: false,
        customToolbars: [
        {
            name: "customToolbarSave",
            collapseButtonIcon: "ui-igbutton-collapse",
            expandButtonIcon: "ui-igbutton-expand",
            items: [setToolbar("saveTemplate", saveTemplet, "Save Template")]
        }]
    });

This should give you the ability to use the MVC pattern and pass data through the Model but still be able to render the customer toolbars.

The reason the toolbars are not available through the MVC wrapper is that the toolbars that are used by the HTML editor are still CTP controls. At this time the way to set up the toolbars is through JavaScript.

You should still be able to display data from the model when using JavaScript to render the control, though when I try this I get the same behavior that you are encountering. I am currently looking in to this further to see if I can provide you with better details on how you can implement the behavior you want. I'll keep you notified of my progress and should have another update for you by the end of the business day tomorrow.

Jason, you are right. If I only initialise HTML Editor Control in my view, then the control behaves as expected. I would be happier to initialise it only in the Razor view.

My htmlEditor needs to have a custom toolbar with 6 additional buttons, and unfortunately I cannot find the documentation how to do it in the Razor view using Infragistics.Web.Mvc dll, that is only reason I re-initialise it in JavaScript

Is it even possible to build custom toolbar in the razor view without JavaScript?

Thanks for your help.

I am a little bit confused; why are you instantiating the HTML editor through both Razor syntax and JavaScript? You should only need one or the other, though I don't believe your current implementation would cause this behavior.

So far I have been unable to reproduce the behavior you describe. I've attached the sample application I put together to test the behavior you are encountering. Are you able to reproduce the error with this sample?

Jason

Thanks for looking into this

I have used UrlDecode in the controller before saving, and it saves as expected (<h1>Hello</h1>),

However, once re-loaded the content is displayed as text format, and not as html, and what I see in the normal view is <h1>Hello</h1>

And in the view source &lt;h1&gt;Hello&lt;/h1&gt;

Is seems to me that the igHTMLEditor is missing something on the initialisation. Any idea?

This is my save controller, and below is my view code.

        [HttpPost]

        [ActionName("email-template")]

        public ActionResult EmailTemplate(EmailTemplate emailTemplate)

        {

            //save template

            if (emailTemplate != null)

            {

                emailTemplate.BodyText = HttpUtility.UrlDecode(emailTemplate.BodyText);

                DataRepositories.SaveEmailTemplate(emailTemplate);

            }

            return View("email-template", emailTemplate);

        }

The data saved in SQL table looks like this <h1>Hello</h1>,

@using Infragistics.Web.Mvc

@model InfragisticsTest.Models.EmailTemplate

@{

    ViewBag.Title = "Email Template";

}

<h2>@ViewBag.Title</h2>

@{

    using (Html.BeginForm("email-template", "Email", FormMethod.Post, new { id = "frmOutputTemplate" }))

    {

        @Html.HiddenFor(m => m.Id)

        @(Html.Infragistics().

                HtmlEditorFor(m => m.BodyText).

                ID("htmlEditor").

                Render()

        )

    }

}

@section scripts {

    <script type="text/javascript">

        $(function () {

            var height = $('html').hasClass('touch') ? 500 : 350;

            // initialize igHtmlEditor

            var htmlEditor = $("#htmlEditor").igHtmlEditor({

                width: "99%",

                height: height,

                inputName: "BodyText",

                showCopyPasteToolbar: false,

                customToolbars: [

                {

                    name: "customToolbarSave",

                    collapseButtonIcon: "ui-igbutton-collapse",

                    expandButtonIcon: "ui-igbutton-expand",

                    items: [setToolbar("saveTemplate", saveTemplet, "Save Template")

                    ]

                }]

            });

            //var editorContent = $("#htmlEditor").html();

            //$("#htmlEditor").igHtmlEditor("setContent", editorContent, "html");

        });

        function setToolbar(name, handler, value) {

            return {

                name: name,

                type: "button",

                handler: handler,

                scope: this,

                props: {

                    isImage: {

                        value: false,

                        action: '_isSelectedAction'

                    },

                    imageButtonTooltip: {

                        value: value,

                        action: '_tooltipAction'

                    },

                    imageButtonIcon: {

                        value: "ui-icon-contact",

                        action: '_buttonIconAction'

                    }

                }

            }

        }

        function saveTemplet(ui) {

            var data = $("#frmOutputTemplate").serialize();

            // post the form as an ajax call

            $.ajax({

                type: "POST",

                url: "/Email/email-template",

                data: data,

                dataType: "text"

            });

        }

    </script>

}