当我第二次单击模式框时，CKEditor 不起作用

Question

我在弹出模式框中添加 CKEditor 函数时遇到问题。当我第一次单击按钮打开弹出模式时，CKEditor 功能可以工作。如果我第二次单击按钮打开弹出模式，CKEditor 功能将无法工作并显示 textarea HTML。模态框 id mesyuarat_modal 不能使用相同的 id 因为会影响我在下一个函数中的编码。

下面是我的示例编码，只显示表格中的两行数据：

let theEditor;

    ClassicEditor
      .create(document.querySelector('#agenda_mesyuarat_edit'))
      .then(editor => {
        theEditor = editor;

      })
      .catch(error => {
        console.error(error);
      });


    function getDataFromTheEditor() {
      return theEditor.getData();
    }
    

<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<table>
  <tr>
    <th>Button</th>
    <th>Company</th>
    <th>Contact</th>
  </tr>
  <tr>
    <td><a href="#mesyuarat_modal" type="button" data-toggle="modal" data-original-title="Help" class="btn btn-primary btn-xs" data-color-format="hex">Open Modal</a></td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
  </tr>
  <tr>
    <td><a href="#mesyuarat_modal_2" type="button" data-toggle="modal" data-original-title="Help" class="btn btn-primary btn-xs" data-color-format="hex">Open Modal</a></td>
    <td>AGH</td>
    <td>Francisco Chang</td>
  </tr>
 
</table>
<div id="mesyuarat_modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Draft</h4>
            </div>
            <div class="modal-body" id="mesyuarat_content">
            <textarea class="form-control" name="agenda_mesyuarat_edit" id="agenda_mesyuarat_edit" value="" title="Agenda Mesyuarat">
                                            </textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Batal</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="mesyuarat_modal_2" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Draft</h4>
            </div>
            <div class="modal-body" id="mesyuarat_content">
            <textarea class="form-control" name="agenda_mesyuarat_edit" id="agenda_mesyuarat_edit" value="" title="Agenda Mesyuarat">
                                            </textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Batal</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

希望有人能指导我如何解决这个问题。谢谢。

Answer 1

这是一个简单的示例，您可以如何将 CKEditor 附加到表或 div 中的行数。您需要创建 CKEditor 的动态实例，以便将它们附加到表行或动态数据中。

//Index starts from 1, so you'll get CKEditor with unique ids
var index = 1;

//Click event, so you have any number of CKEditor created
$("#btnAdd").click(function () {
     var newEditor = 'editor' + index; //Unique id for CKEditor
 
     $("#details").append('<textarea id="' + newEditor + '"></textarea>'); //Append it to a div for demonstration purpose

     CKEDITOR.replace(newEditor); //CKEditor unique instance attached
     index++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>

<div>
    <button type="button" id="btnAdd">Add CKEditor</button>
</div>

<div id="details">
</div>