时间戳

首页 > 解决方案 > 如何将 Jodit 编辑器添加到动态添加的文本区域？

javascript - 如何将 Jodit 编辑器添加到动态添加的文本区域？

问题描述

我有这个 JavaScript：

j = 0;

function add_more_additional_field() {
    $('#additional_options').append(
        '<div class="form-group row mar-btm"><div class="col-md-3"><input type="hidden" name="af_no[]" value="' +  j + '"><input type="text" class="form-control" name="af_title[]" value="" placeholder="Additional Title"></div><div class="col-md-7"><textarea class="form-control editor" name="af_options[]"></textarea></div><div class="col-md-1"><button onclick="delete_row(this)"  class="btn btn-danger btn-icon"><i class="demo-psi-recycling icon-lg"></i>Remove</button></div></div><hr/>'
    );
    j++;
    var editor = new Jodit('#additional_options .editor');
}

function delete_row(em) {
    $(em).closest('.row').remove();
    update_sku();
}

该脚本的功能是在单击时附加更多的表单字段。这段代码工作正常。现在我也想在每次点击时附加一个 Jodit 编辑器。我尝试通过赋予唯一的 id 或类来做到这一点（请参阅我j在上面的代码中如何使用）。但是此代码仅在第一个文本区域附加 Jodit 编辑器，但不为其他文本区域添加它。

如何将编辑器附加到每个文本区域字段？

标签： javascripthtmlformsappendjodit

解决方案

以下行将始终针对该类的第一个元素editor：

new Jodit('#additional_options .editor');

...当您想使用该类定位新的最后一个元素时。因此，使用将 DOM 元素传递给Jodit构造函数的可能性。然后，您可以获取所有匹配项的节点列表，并获取最后一个，并将其传递给构造函数：

new Jodit([...document.querySelectorAll('#additional_options .editor')].pop());

推荐阅读