Problem with Ckeditor used together with modal Bootstrap

Asked

Viewed 181 times

1

The editor works, but all form controls in the editor’s pop-up windows are disabled, if you try to include a link or image, for example, you cannot enter the URL or any description because entries are disabled.

Any alternative solution to this problem?

<html>
<head>
   <script src='https://code.jquery.com/jquery-3.2.1.slim.min.js'></script>          
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
            <script type="text/javascript" src="ckeditor/ckeditor.js"></script>


                  <link href="css/bootstrap.min.css" rel="stylesheet">


</head>

<body>
<button type="button" data-toggle="modal" data-target="#modalAddBrand">Launch modal</button>
<div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog" aria-labelledby="modalAddBrandLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <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" id="modalAddBrandLabel">add</h4>

            </div>
            <div class="modal-body">
                <form>
                    <textarea name="editor1" id="editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor.</textarea>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="AddBrandButton" type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<script>
    CKEDITOR.replace('editor1');

$(document).ready(function(){

$.fn.modal.Constructor.prototype.enforceFocus = function () {
    modal_this = this
    $(document).on('focusin.modal', function (e) {
        if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
        // add whatever conditions you need here:
        &&
        !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
            modal_this.$element.focus()
        }
    })
};

});
    </script>
</body>
</html>
modal ckeditor

1 answer

1


This solution you are using only works in Bootstrap 3. In 4 you should put a _ before the property enforceFocus, and can leave the function empty.

So change all this:

$.fn.modal.Constructor.prototype.enforceFocus = function () {
    modal_this = this
    $(document).on('focusin.modal', function (e) {
        if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
        // add whatever conditions you need here:
        &&
        !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
            modal_this.$element.focus()
        }
    })
};

For that alone:

$.fn.modal.Constructor.prototype._enforceFocus = function(){};

  • Muito Obrigado

  • Very good, @Sam.

  • @Sam, I’m sorry. I didn’t remember using this. In what JS code location do I insert this snippet of you ?

  • It worked, @Sam. Thanks again. I had already voted on this answer from you here, too bad you can’t vote again. Do you want to add an answer there to my other question or leave it alone ?

  • @Sam . Also take that comment with link referencing that there is an answer here. Guys will soon mark as duplicate.

  • @Jason-Theinternship. I think it best to mark as duplicate even.

  • But when you mark as duplicate the question does not stop appearing to other users ?

  • Why didn’t you answer ?

  • 1

    @Jason-Theinternship. I thought it best not to answer because this one already solves the problem.

  • @Jason-Theinternship. Or else they can come and accuse me of something.

  • @Sam, that’s right. Caution is always good.

Show 6 more comments

Browser other questions tagged modal ckeditor

You are not signed in. Login or sign up in order to post.