title: MVC: Binding CKEditor textarea value to the model
body: <p>I have chosen CKEditor as the Rich Text Editor component for my ASP.Net MVC project.</p>
  
  <p>To render the Rich Text Editor is not a problem (quite easy in fact):</p>
  
  <pre><code>@Html.TextAreaFor(model =&gt; model.MessageDiffusion.Message, new { @id = idRichTextEditor })
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
      // Rich Text Editor (CKEditor) Configuration 
          CKEDITOR.replace(
              idRichTextEditor, {
                  language: 'fr'
              }
          );
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Which renders:</p>
  
  <p><img src="https://i.stack.imgur.com/gXwfk.png" alt="RichTextArea correctly rendering my Model.MessageDiffusion.Message property"></p>
  
  <p>My problem is related with posting the data. If I change the message to: 'The new message' I will still get 'The old message' on my post:</p>
  
  <p><img src="https://i.stack.imgur.com/Y8kU8.png" alt="The controller&#39;s HttpPost action"></p>
  
  <p>I mean, the viewModel will have a property message which will contain 'The old message' instead of 'The new message'.
  I've tried to do the following immediately before the post (onBegin):</p>
  
  <pre><code>  $('#idRichTextEditor').text(CKEDITOR.instances["idRichTextEditor"].getData());
  </code></pre>
  
  <p>Or:</p>
  
  <p>$('#idRichTextEditor').val(CKEDITOR.instances["idRichTextEditor"].getData());</p>
  
  <p>Which didn't help... I've also tried:</p>
  
  <pre><code>for (var instanceName in CKEDITOR.instances) {
      CKEDITOR.instances["idRichTextEditor"].updateElement();
  }
  </code></pre>
  
  <p>But I seem to be unable to bind the CKEditor's text area with my model. I would like to state that if I turn this rich text area into a common text area I can easily get 'The new message' on the controller side.</p>
  
  <p>I would like to state that despite interesting, and related to my problem, the following stackoverflow's discussions didn't help me much:</p>
  
  <p><a href="https://stackoverflow.com/questions/6333160/ckeditor-mvc-3-implementaion-help-needed">CKEditor MVC 3 implementation Help needed</a></p>
  
  <p><a href="https://stackoverflow.com/questions/4491316/ckeditor-and-asp-net-mvc-3-requiredattribute">CKEditor and ASP.Net MVC 3 RequiredAttribute</a></p>
  
  <p>I believe the problem might be related with the fact that </p>
  
  <p><em>setting data in CKEditor is an asynchronous operation , val( 'some data' ) will return a jQuery Promise object if any of the elements is an editor. You can use it with jQuery helpers:
  $.when( $( '#editor' ).val( 'foo' ) ).then( function() {
      // Now you are sure that the data is set.
  } );</em></p>
  
  <p>I read this information here:
  <a href="http://docs.ckeditor.com/#!/guide/dev_jquery" rel="nofollow noreferrer">CKEditor 4 documentation</a></p>
  
  <p><strong>Update</strong>: I just realised that when I post the data a second time, the richtext info is correctly binded to the Message property of my viewmodel. This means that I can get what I want if I click the 'save button' twice, but not once...</p>