将数据传递到 Modal 时出现重复的 CKEditor5 问题

Question

我使用 AJAX 请求从数据库获取数据。当我将每个数据传递到输入表单时，没问题，但是当我将数据传输到CKEditor5时，我收到错误：每次关闭并重新打开模态时，模态都会出现。传入 CKEditor 的数据不会更改，但会创建一个新的 CKEditor。这是我的 Modal 和 AJAX 请求代码

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="detailModal"
        aria-hidden="true" id="detailPlaceModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title h4" id="detailModal">Detail Place</h5>
                    <button type="button" class="btn btn-xs btn-icon btn-ghost-secondary" data-dismiss="modal"
                        aria-label="Close">
                        <i class="tio-clear tio-lg"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="detailContent">
                            <div class="form-group">
                                <label for="describe_place">Mô tả</label>
                                <textarea id="editCKeditor" class="form-control" name="describe_view_place"></textarea>
                            </div>
                            <div class="form-group">
                                <button data-modal-hide="defaultModal" type="submit" class="btn btn-primary">I
                                    accept</button>
                            </div>
                    </div>

                </div>
            </div>
        </div>
</div>

AJAX

function getDetailPlace(event, element) {
            event.preventDefault();
            var url = $(element).attr('href');

            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    var detailData = response.vlplace[0];  
                    $('#describe_view_place').val(detailData.describe_place);
                    ClassicEditor
                        .create(document.querySelector('#editCKeditor'))
                        .then(editor => {
                            var describeValue = detailData.describe_place;
                            editor.setData(describeValue);
                        })
                        .catch(error => {
                            console.error(error);
                        });
                    $('#detailPlaceModal').modal('show');
                },
                error: function() {

                }
            });
}

我研究并修复了它，但无能为力

Answer 1

在 AJAX 中

var myEditorSend;
function getDetailPlace(event, element) {
        event.preventDefault();
        var url = $(element).attr('href');
        myEditorSend.setData('');
        $.ajax({
            url: url,
            type: 'GET',
            success: function(response) {
                var detailData = response.vlplace[0];  
                $('#describe_view_place').val(detailData.describe_place);
                var describeValue = detailData.describe_place;
                myEditorSend.setData(describeValue);
                $('#detailPlaceModal').modal('show');
            },
            error: function() {

            }
        });
      var editCKeditor= () => {
       ClassicEditor
        .create(document.querySelector('#editCKeditor'))
        .then(editor => {
          myEditorSend = editor;
        // console.log(editor);
      })
     .catch(error => {
       console.error(error);
     });
    }