在模态中动态添加 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

如果您计划拥有多个文本区域，您可能需要为文本区域指定一个自定义 ID。

let currentId = 0;

我将 'var html' 代码移到创建函数中，这样我们就可以在每次单击添加按钮时编辑 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;

});

根据您要完成的任务，您可能不希望在文本区域的 ID 中使用 customId，但这应该会让您朝着正确的方向前进。

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

看到这个fiddlehttps://jsfiddle.net/bkqxnu8f/3/

在模态中动态添加 ckeditors 字段

Add ckeditors fields dynamically in modal

php

jquery

ckeditor