CODEWITHSUNDEEP
javascriptjqueryckeditor
Bablu Ahmed
Bablu Ahmed

Reputation: 5010

CKEditor is not working with bootstrap modal

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

Upvotes: 1

Views: 5635

Answers (3)

BaukeC
BaukeC

Reputation: 1

This worked for me:

  • remove tabindex="-1" on Bootstrap Modal
  • add data-bs-focus="false"

Seems this is not a problem of ckeditor, but a bootstrap issue.

Upvotes: 0

Kajetan W.Li
Kajetan W.Li

Reputation: 161

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

Upvotes: 1

Sven Liivak
Sven Liivak

Reputation: 1403

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

Upvotes: 1

Related Questions