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.

Was it helpful?

Solution 2

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top