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

Question

我遇到了一点问题;我有一个在普通页面上工作的富文本编辑器，但是当我将其放入部分视图时，它不再显示，有没有办法解决这个问题？例如，假设我有一个名为 normal.cshtml 的普通页面，编辑器将在该普通页面中工作，代码如下所示 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" })

这就是它在普通页面上的外观，并且运行良好; 现在，当我将其放入部分视图时，没有任何内容显示，其编码如下... normal_page.cshtml with get partview

   @{
  <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" })

单击"获取部分"后，部分视图将显示所有元素，但文本编辑器显示为常规文本框;关于如何解决此问题的任何想法？

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

Answer 1

在

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

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

注： 在渲染部分视图的主视图中包括 ckeditor js 文件。

Answer 2

解决此问题。Pelase 创建了一个通用的 JavaScript 函数来绑定 ckeditor，如下所示：

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

现在你需要在部分视图的 Document.ready 上或在 ajax 请求完成后调用上述函数。