CKEditor не работает с модом начальной загрузки

Question

Я хочу показать ckEditor на модале начальной загрузки, но ckEditor не открывается, как показано ниже.После поиска в интернете у меня есть какое-то решение, например, эта ссылка , но я выполню запрос ajax, поэтому мне нужно открыть модал с помощью $('.cia_modal').modal('toggle').Ссылка на вышеуказанное решение не работает для меня

Модальная кнопка:

<button class="btn btn-info btn-xs cia_modal_btn" data-id="<?php echo $post->post_id; ?>" data-table="post" data-attr="post_id">
   Create New Post
</button>

Модальная:

<!--Modal-->
<div class="modal fade cia_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Create New Post</h4>
            </div>
            <div class="modal-body">

                <form action="/action_page.php">
                    <div class="form-group">
                        <textarea class="ck_editor" name="post" id="" cols="30" rows="10"></textarea>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--End Modal-->

Javascript:

<script type="text/javascript">

        $(document).on("click", ".modal_btn", function (e) {
        e.preventDefault();
        e.stopPropagation();

        let cia_modal = $('.cia_modal');
        //Set modal show/hide
        cia_modal.modal('toggle');

        let id = $(this).attr('data-id');
        let table = $(this).attr('data-table');
        let attr = $(this).attr('data-attr');

        //Set Form Data
        let formData = new FormData();
        formData.append('id',id);
        formData.append('table',table);
        formData.append('attr',attr);

        $.ajax({
            type: 'post',
            url: '<?php echo base_url()?>post/create_post',
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
               //
            }
        });
    });
</script>

Пожалуйста, помогите мне.Спасибо

Answer 1

Полагаю, вы используете CKEditor 4.x.

Вам нужно создать редактор, используя CKEDITOR.replace( 'ck_editor' ), вы можете сделать это только на элементе, который существует внутри документа.Неважно, скрыто это или нет.Если ваш модал находится внутри DOM, но скрыт, то просто инициализируйте редактор.В противном случае вам нужно подождать, пока элемент будет добавлен, затем вызвать CKEDITOR.replace.

В зависимости от того, как загрузчик реализует modal.show.Если он просто меняет CSS, чтобы сделать его видимым, то, скорее всего, вы можете инициализировать редактор в начале вашего скрипта, если он добавляет элементы в документ, тогда вам нужно использовать некоторые из событий начальной загрузки, чтобы создать редактор в нужное время.См shown.bs.modal: https://getbootstrap.com/docs/4.0/components/modal/#events

Answer 2

Просто инициализируйте редактор:

<script type="text/javascript">
    ClassicEditor.create($('.ck_editor')[0])
        .then( editor => {
            console.log( editor );
        })
        .catch( error => {
            console.log( error );
        });

    $(document).on("click", ".modal_btn", function (e) {
    //....