mvc3 how can i make text editor work in a partialview

Question

I am having a bit of an issue; I have a rich text editor that works on a normal page but when I put it inside a partialview it no longer shows, is there a way I can fix this? For instance lets say I have normal page called normal.cshtml the editor would work in that normal page and the code would look like this normal_page.cshtml

   @{
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />

// this file below is the .js file that gets the properties of the editor
<script type="text/javascript" src="../../DAL/ckeditor/ckeditor.js" ></script>

}
@Html.TextArea("myeditor", new { @class = "ckeditor" })

Thats how it looks on a normal page and it works perfectly; now when i put it inside a partialview nothing shows up and that is coded as follow... normal_page.cshtml with a get partialview

   @{

  <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />

// this file below is the .js file that gets the properties of the editor
<script type="text/javascript" src="../../DAL/ckeditor/ckeditor.js" ></script>
  }


 @using (Ajax.BeginForm("editor", "partialviews", null, new AjaxOptions
{
UpdateTargetId = "Tom",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET"
 }))
 {



   <input type="submit" value="Get Partial" />    

  }

}
 <div id="Tom" style="float:left">
 </div>

My Partial

    @{


  }
  @Html.TextArea("myeditor", new { @class = "ckeditor" })

once you click "Get Partial" the partialview display all the elements but the text editor comes out as a regular textbox;any ideas on how to fix this ?

One last thing since this is a partialview the elements do not show on the pagesource, so i do not know if maybe that is what causing the problem.

Answer 1

To resolve this issue.Pelase create a common javascript function that bind ckeditor like below:

<script>
 function AttachCkEditor()
 {
 $(".ckeditor").ckeditor(function () { /* callback code */ }, options);
 }

</script>

Now you need to call the above function on Document.ready of partial view or after ajax request complete.

Answer 2

Include the following script in at the bottom of your partial view

<script type="text/javascript"> CKEDITOR.replace('textarea-id'); </script>

Note: Include ckeditor js file in your main view where partial view is rendered.