重复summernote编辑器在同一页的所有文字区域 [英] repeat the summernote editor for all the textareas in same page

问题描述

我有以下

    <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节

我可以填充它的初步认识多标签文本域

using above div section I can populate multiple textareas with its relavant label

这是怎么显示了这是工作

this is how it shows when this is working

然后我尝试添加summernote富文本编辑器为所有这些领域的文本中，
使用以下家庭index.js文件

Then I try to add summernote rich text editor for all of these text areas , using following home-index.js file

(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))

那么它适用于第一个文本区域。不适用于文本区域的其余部分。

then its apply for first text area. not apply for rest of the text areas

像下面

推荐答案

您创建无效的HTML，因为每个文本区域具有相同的 ID 属性和（ #FieldValue'）将只与 ID =fieldValue方法返回的第一个元素。

Your creating invalid html because each textarea has the same id attribute and ('#FieldValue') will only ever return the first element with id="FieldValue".

此外，当您提交表单，这将不绑定到你的模型。相反，使用为循环生成HTML，给文本区域为一个jQuery选择使用（注意财产 ListProductField 将需要实施的IList 或者您可以使用自定义 EditorTemplate 的类型）

In addition this will not bind to your model when you submit the form. Instead, use a for loop to generate the html and give the textarea a class name for use as a jQuery selector (note that property ListProductField will need to implement IList or alternatively you can use a custom EditorTemplate for the type)

@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 关联的标签，但你控制的财产字段名。我想你打错WA周围的参数，它应该是

Side note: It appears your @Html.LabelFor() is incorrect. It is creating a label associated with property ProductFieldNameEn but you control is for property FieldName. I think you have the parameters the wrong wa around and it should be

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

这将与相关以下textarea的标签，并显示属性的值 ProductFieldNameEn

这篇关于重复summernote编辑器在同一页的所有文字区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！