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

Posted 2023-03-22

【中文标题】对同一页面中的所有文本区域重复summernote编辑器

【英文标题】：repeat the summernote editor for all the textareas in same page

【发布时间】：2016-02-13 09:14:27

【问题描述】：

我有一个如下所示的 cshtml 视图页

    <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 富文本编辑器， 使用以下 home-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))

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

如下图

【参考方案1】：

您创建的 html 无效，因为每个 textarea 具有相同的 id 属性，而 ('#FieldValue') 只会返回带有 id="FieldValue" 的第一个元素。

此外，当您提交表单时，这不会绑定到您的模型。相反，使用 for 循环来生成 html 并为 textarea 提供一个类名以用作 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, ...

它将标签与以下文本区域相关联，并显示属性ProductFieldNameEn的值

【讨论】：

我已经尝试过您的方法，但是我正确获取了所有标签，但没有 Summernote 编辑器内容，只有文本区域。这里我的整个代码是 dotnetfiddle.net/quuTve ，在你指导下我已经改变了

我正在尝试为此自定义 this similar php question 答案，但有点混乱

除非你有错别字，否则这没有任何意义。但是var self = new HomeIndex(); self.init(); 也没有多大意义。只需注释掉所有脚本并替换为$('.summernote').summernote(); 即可进行测试。

我需要在home-index.js或cshtml页面<script type="text/javascript"> .. </script>中应用$('.summernote').summernote();代码吗？

把它放在cshtml页面测试它是否有效

【参考方案2】：

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

【讨论】：

然后第一个文本区域的第一个summernote编辑器也消失了:(

我已经编辑了答案，将类包含在 html 和 javascript 中。如果文本区域消失，可能是由于其他一些错误