对同一页中的所有文本区域重复 summernote 编辑器

Question

我有一个如下所示的 cshtml viewpage

    <div class="form-group">

            @foreach (var fields in Model.ListProductFields)
            {

               @Html.LabelFor(x => x.ProductFieldNameEn, fields.FieldName, htmlAttributes: new { id="", @class = "control-label col-md-2" })

               <div class="col-md-10">

                  @Html.TextAreaFor(model => model.FieldValue, new { htmlAttributes = new { @class = "form-control", @row = 5 } })

               </div>                    
            }

    </div>

使用上面的 div 部分我可以用它的相关标签填充多个文本区域

这是它工作时的显示方式

然后我尝试为所有这些文本区域添加 summernote 富文本编辑器，使用以下主页-index.js 文件

(function ($) {
    function HomeIndex() {
        var $this = this;

        function initialize() {
            $('#FieldValue').summernote({
                focus: true,
                height: 150,
                codemirror: {
                    theme: 'united'
                }
            });
        }

        $this.init = function () {
            initialize();
        }
    }

    $(function () {
        var self = new HomeIndex();
        self.init();
    })
}(jQuery))

然后它申请第一个文本区域。不适用于其余文本区域

喜欢下面

Answer 1

     <div class="form-group">

                @foreach (var fields in Model.ListProductFields)
                {

                   @Html.LabelFor(x => x.ProductFieldNameEn, fields.FieldName, htmlAttributes: new { id="", @class = "control-label col-md-2" })

                   <div class="col-md-10">

                      @Html.TextAreaFor(model => model.FieldValue, new { htmlAttributes = new { @class = "form-control  mySummerNote", @row = 5 } })

                   </div>                    
                }
    </div>


(function ($) {
    function HomeIndex() {
        var $this = this;

        function initialize() {
            $('.mySummerNote').summernote({
                focus: true,
                height: 150,
                codemirror: {
                    theme: 'united'
                }
            });
        }

        $this.init = function () {
            initialize();
        }
    }

    $(function () {
        var self = new HomeIndex();
        self.init();
    })
}(jQuery))

Answer 2

您创建的 html 无效，因为每个文本区域都具有相同的 id 属性，而 ('#FieldValue') 只会 return 第一个带有 id="FieldValue" 的元素。

此外，当您提交表单时，这不会绑定到您的模型。相反，使用 for 循环生成 html 并给文本区域一个 class 名称以用作 jQuery 选择器（注意属性 ListProductField 将需要实现 IList 或者您可以为类型使用自定义 EditorTemplate)

@for (int i = 0; i < Model.ListProductFields.Count; i++)
{
    @Html.LabelFor(x => x.ListProductFields[i].ProductFieldNameEn, Model.ListProductFields[i].FieldName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextAreaFor(m => m.ListProductFields[i].FieldValue, new { htmlAttributes = new { @class = "form-control summernote", @row = 5 } })
    </div>                    
}

并将选择器更改为

$('.summernote').summernote({

旁注：您的 @Html.LabelFor() 似乎不正确。它正在创建与属性 ProductFieldNameEn 关联的标签，但您控制的是属性 FieldName。我认为你的参数有误，应该是

@Html.LabelFor(x => x.ListProductFields[i].FieldName, Model.ListProductFields[i].ProductFieldNameEn, ...

将label关联到后面的textarea，并显示属性 ProductFieldNameEn

的值

对同一页中的所有文本区域重复 summernote 编辑器

repeat the summernote editor for all the textareas in same page

javascript

asp.net-mvc

jquery

textarea

summernote