ckeditor 在 foreach 语句中只显示一次 asp.net mvc

Question

我正在写博客，我希望用户能够通过 ckeditor 的一些额外标记对博客发表评论。所以我做了一个 foreach 声明来显示所有的 cmets 和一个带有 ckeditor 的 textarea 字段每篇博客文章。现在奇怪的是一切正常，但 ckeditor 仅适用于第一个博客，而 textareas 在所有博客中都可见。

这是 webinspector 显示的错误

未捕获编辑器实例“editor1”已附加到提供的元素。

这是我的看法

 IEnumerable<Portfolio.Models.Messages>

@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/Comments.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/css/Blog.css" />

@*Shows the blog posts that are posted to the database*@
@foreach (var messages in Model)
{
    <div class="jumbotron opacity_container">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    @*Gets the title of the blog post*@
                    <h2 class="panel-title">
                     @messages.Title
                    </h2>
                    @messages.WhenCreated
                </div>    
                @*Gets the body of the blog post and decodes the html of the 
                 ckeditor*@
                <div class="panel-body">
                @Html.Raw(System.Web.HttpUtility.HtmlDecode(messages.Body))
               </div>
            </div>
        </div>
        @*this button gets the id from the database of the Message table 
          this helps to prevent that all the comments from all blogs gets 
          shown and thusshows only the comments that belong to the blog in 
          question*@

          <button class="btn btn-primary" id="@messages.MessagesId" 
          onclick="ShowComments(this.id)">
          Show Comments
          </button>

        @*this is the container where al the comments are placed in and 
        where you can post comments. The comments are placed in the Comment 
        partial view*@

        <div class="hidden" id="Comm@(messages.MessagesId)">
        @Html.Partial("_Comment")

        @*this button gets the id from the database of the Message table 
        this helps to prevent that all the comments from all blogs gets 
        hidden and thushides only the comments that belong to the blog in 
        question*@

            <button class="btn btn-primary" id="@messages.MessagesId"
            onclick="HideComments(this.id)">
            Hide Comments
            </button>
        </div>
    </div>
}

在隐藏类名的 div 中调用局部视图。

这是我的部分观点

@model IEnumerable<Portfolio.Models.Messages>
@{
    ViewBag.Title = "Home Page";
}
<link rel="stylesheet" type="text/css" href="~/Content/css/Blog.css" />
<script src="~/Scripts/ckeditor/ckeditor.js"></script>

<div class="row" id="CommentContainer">
    <div class="col-md-12">
        <h3>Post Comment</h3>
        @*The form to post comments*@
        @using (Html.BeginForm("Create", "Messages"))
            {
            <div class="form-group">
                <label>Comment</label>
                @Html.TextArea("editor1", htmlAttributes: 
                new { name = "editor1", 
                id = "editor1", rows = "10", cols = "180" })
            </div>
                <button type="submit" class="btn btn-primary" 
                 id="PostButton">Post Comment
                </button>
            } 

        @*CKEditor script*@
        <script>
            CKEDITOR.replace('editor1');
        </script>


            <div class="row">
                <div class="col-md-10">
                    @*Places al the comments and decodes the html from the 
                    ckeditor*@
                    @foreach(var messages in Model)
                    {
                        <div class="well" id="CommentBox">                       
                           @Html.Raw(System.Web.HttpUtility.HtmlDecode
                           (messages.Body))
                       </div>
                    }
               </div>
          </div>
     </div>
</div>

ckeditor 放置在 foreach 循环内的局部视图中。所以我不明白为什么 taxtarea 在所有帖子中都可见，但 ckeditor 不可见，而它们都在同一个 foreach 语句中。

Answer 1

正如 Gyum Fox 所说，所有 CkEditor 都具有相同的 id，但这不起作用，因为 id 应该是唯一的。