Добавить поля ckeditors динамически в модальном

Question

У меня есть cms, где при нажатии открыть модал, а внутри у меня мало полей, а затем у меня есть другая кнопка внутри модала, где я могу добавить динамически поля ckeditors, нажав на кнопку, вот что я пытался сделать:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-md-12">
  <button style="margin-bottom:5px;" type="button" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i> Adauga</button>
</div>
<div id="add_data_Modal" class="modal fade" role="dialog">

<div class="modal-dialog modal-lg">



  <!-- Modal content-->

  <div class="modal-content">

    <div class="modal-header">

      <button type="button" class="close" data-dismiss="modal">&times;</button>

      <h4 class="modal-title">Adauga categorie</h4>

    </div>

    <div class="modal-body">

      <div class="row">

       <div class="container">

          <form action="add.php" method="POST">

          <div class="form-group">

              <label for="input-1">Nume Categorie</label>

              <input type="text" class="form-control" name="nume" id="nume" placeholder="Nume categorie">

          </div>

          <div class="form-group">

              <label for="input-1">Categorie</label>

              <select class="form-control" id="categorie" name="categorie">

                  <option value="0">Categorie principala</option>


              </select>

          </div>

          <div class="form-group">

              <label for="input-1">Vizibil</label>

              <select class="form-control" id="activ" name="activ">

                  <option selected>Selecteaza vizibilitatea</option>

                  <option value="1">Da</option>

                  <option value="0">Nu</option>

              </select>

          </div>

          <div class="form-group">

              <label for="input-1">Pozitia</label>

              <input type="text" class="form-control" name="pozitie" id="pozitie" placeholder="Pozitie">

          </div>

          <div class="row">

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

              <div class="form-group">

                 <div class="icheck-material-primary">

                <input type="checkbox" id="user-checkbox1" checked="">

                <label for="user-checkbox1">Modele Produse</label>

                </div>

              </div>

            </div>

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

              <div class="form-group">

                 <div class="icheck-material-primary">

                <input type="checkbox" id="user-checkbox2" checked="">

                <label for="user-checkbox2">Paletar Materiale</label>

                </div>

              </div>

            </div>

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

              <div class="form-group">

                 <div class="icheck-material-primary">

                <input type="checkbox" id="user-checkbox3" checked="">

                <label for="user-checkbox3">Estimare Pret</label>

                </div>

              </div>

            </div>

          </div>

          <div class="form-group">

            <div class="rowa">

              <div class="add-plus">Adauga tab-uri</div>

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

                <span id="add_aut" class="btn btn-primary">+</span>

                 <div id="auth-rows"></div>

              </div>

            </div>

          </div>

       </div>

      </div>

    </div>

    <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times"></i> Inchide</button>

        <button type="submit" name="submit" class="btn btn-primary"><i class="fa fa-check-square-o"></i> Salveaza</button>

      </div>

       </form>

  </div>

</div>

</div>

<script>

    $(document).ready(function(e){

        // variable 

        var html3 = '<div class="row" id="parent-autor"> <p id="auth-del"><i class="fa fa-minus-square" aria-hidden="true"></i></p> <div class="row"> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="titlu_tab" name="titlu_tab[]"> </div> </div> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="Pozitie" name="pozitie_tab[]"> </div> </div> </div> <div class="col-md-12"> <div class="form-group"> <textarea name="editor[]" class="ckeditor" id="continut" rows="8" cols="80"></textarea> </div> </div></div>';


        $("#add_aut").click(function(e){

            $('#auth-rows').append(html3);

        });


        $('#auth-rows').on('click', '#auth-del', function(E){

            $(this).parent('div').remove();

        });
});

</script>

В этом режиме, когда я нажимаю на кнопку «Добавить», я хочу добавить больше полей, это делается, но не отображается ckeditor, а просто текстовая область, которая мне не нужна. Спасибо!

Answer 1

Возможно, вы захотите присвоить текстовой области собственный идентификатор, если вы планируете иметь их несколько.

let currentId = 0;

Я переместил код 'var html' в функцию создания, чтобы мы могли редактировать идентификатор при каждом нажатии кнопки добавления, потому что каждый раз нам нужен уникальный идентификатор. После того, как текстовая область существует, я вызываю .ckeditor () для этой текстовой области, которая должна активировать инструменты ckeditor для этого поля. Затем я увеличиваю customId, чтобы убедиться, что следующая добавленная форма имеет другой идентификатор.

$("#add_aut").click(function(e){

    var html3 = '<div class="row" id="parent-autor"> <p id="auth-del"><i class="fa fa-minus-square" aria-hidden="true"></i></p> <div class="row"> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="titlu_tab" name="titlu_tab[]"> </div> </div> <div class="col-md-4"> <div class="form-group"> <input type="text" class="form-control" placeholder="Pozitie" name="pozitie_tab[]"> </div> </div> </div> <div class="col-md-12"> <div class="form-group"> <textarea name="editor[]" class="ckeditor" id="continut' + currentId + '" rows="8" cols="80"></textarea> </div> </div></div>';
    $('#auth-rows').append(html3);
    $('#continut' + currentId).ckeditor();
    currentId += 1;

});

Возможно, вы не захотите использовать customId в id текстовой области в зависимости от того, что вы пытаетесь выполнить, но это должно привести вас в правильном направлении.

Кроме того, вам нужно добавить ckeditor.js, а также скрипт адаптера jquery, чтобы это работало.

Смотри эту скрипку https://jsfiddle.net/bkqxnu8f/3/