mvc3如何使文本编辑器在部分视图中工作

Question

我有点问题；我有一个在普通页面上工作的丰富文本编辑器，但是当我把它放在一个partialview中时，它不再显示了，有什么方法可以修复这个问题吗？例如，假设我有一个名为normal.cshtml的普通页面，编辑器将在该普通页面中工作，代码将类似于这个normal.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" })

这就是它在普通页面上的样子，它工作得很完美；现在，当我把它放在一个分区视图中时，什么都没有出现，它被编码如下……normal_page.cshtml与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>

我的部分

    @{


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

单击“获取部分”后，partialview将显示所有元素，但文本编辑器作为常规文本框出现；对于如何解决这个问题，有什么想法吗？

最后一件事，因为这是一个部分视图，元素没有显示在页面源上，所以我不知道这是否是导致问题的原因。

Answer 1

要解决这个问题，请创建一个通用的javascript函数来绑定ckeditor，如下所示：

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

</script>

现在，您需要在部分视图的Document.ready上或者在ajax请求完成之后调用上面的函数。

Answer 2

在部分视图的底部包含以下脚本

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

注意:在呈现部分视图的主视图中包括ckeditor js文件。