Agfdhyk

I want to show ckEditor on bootstrap modal but the ckEditor is not opening as shown below. After searching through the internet I have got some solution in a different way like this link but I will perform an ajax request hence I have to open the modal using $('.cia_modal').modal('toggle'). The above-mentioned solution link does not work for me

Modal Button:

<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:

<!--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>

Please help me. Thanks

Just initialize the editor:

<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) {

    //....

I assume, you are using CKEditor 4.x.

You need to create editor using CKEDITOR.replace( 'ck_editor' ), you can do it only on element that is existing inside document. It doesn't matter if it's hidden or not. If your modal is inside DOM, but hidden, then just initialize editor. Otherwise you need to wait until element is appended then call CKEDITOR.replace.

Depending on how bootstraps implements modal.show. If it's just changes CSS to make it visible, then most likely you can initialize editor at the start of your script, if it adds elements to document, then you need to use some of bootstrap events to create editor in right time. See shown.bs.modal: https://getbootstrap.com/docs/4.0/components/modal/#events