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

Question

我有这个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 或 class 来做到这一点（请参阅我在上面的代码中如何使用 j）。但是此代码仅在 first 文本区域附加 Jodit 编辑器，但不会为其他文本区域添加它..

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

Answer 1

以下行将始终以 first 元素为目标 editor class:

new Jodit('#additional_options .editor');

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

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

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

How to add Jodit editor to dynamically added text areas?

html

javascript

forms

append

jodit