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

如果计划有多个文本区域，则可能要给textarea一个自定义ID。

let currentId = 0;

我将'var html'代码移到了create函数中，以便每次单击添加按钮时都可以编辑id，因为每次都需要一个唯一的id。在textarea存在之后，我在该textarea上调用.ckeditor（），这将启用该字段的ckeditor工具。然后，我递增customId以确保添加的下一个表单具有不同的ID。

$("#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;

});

根据您要完成的操作，您可能不希望textarea的id中有customId，但这应该可以使您朝正确的方向前进。

此外，您需要添加ckeditor.js以及jquery适配器脚本才能使其正常工作。

看到这个小提琴https://jsfiddle.net/bkqxnu8f/3/

动态添加ckeditors字段

1 个答案: