TinyMCE with Ajax Form in ASP.NET MVC

Question

Hi,

I have set up a form using TinyMCE in my MVC website. To do this, I have an ajaxForm in a partial view like this:

        <% using (Ajax.BeginForm(
                   (Model.ViewMode == ViewMode.Insert) ? "Create" : "Edit",
                   new AjaxOptions()
                   {
                       UpdateTargetId = CustomerViewModel.WindowContentContainerId,
                       OnFailure = "addValidation"
                       //OnSuccess = "refresh"
                   }))
               {%>

    bla bla

     <p>
                <label for="CustomerBaneer">
                    Baner:</label>
                <%= Html.TextArea(CustomerViewModel.FieldPrefix + "CustomerBaneer", Model.CustomerToEdit.CustomerBaneer)%>
                <%= Html.ValidationMessage(CustomerViewModel.FieldPrefix + "CustomerBaneer", "*")%>
     </p>
<input type="submit" value="Save" class="save" />
    <%}%>

    <script type="text/javascript">
     tinyMCE.init({
                mode : "textareas"
                });
            }
    </script>

The tinyMce component render well, and I can change my text in bold, underline, etc.. However, when I click on save, the request is send with the textarea content without its formatting (I have monitored it with firebug). Why? Is there any HTML stripping function enables by default with ajax form?

Thanks.

Answer 1

If you want use tinyMCE with ajax you can try to have a look here

Answer 2

It looks like you need to add an OnBegin handler to your AjaxOptions to call tinyMCE.triggerSave() before your form submits. I'm more familiar with jQuery, so you may have to fix up the syntax for the Ajax.BeginForm calls.

new AjaxOptions()
{
    UpdateTargetId = CustomerViewModel.WindowContentContainerId,
    OnFailure = "addValidation",
    OnBegin = "preSubmit"
    //OnSuccess = "refresh"
}

<script="text/javascript">
  function preSubmit() {
    tinyMCE.triggerSave();
  }
</script>