Problem when trying to add elements ckeditor

Question

I have a page that carries a modal bootstrap. Within Modal there is a textarea with ckeditor. The problem when I try to add a table for example, I click on the add table icon it opens the dialog window, but I can not click on the inputs only in the selects

<div class="modal fade" id="editarDocumento" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
        <form action="#" method="POST">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">    

                <div class="form-group font-poppins">
                    <textarea id="editor1" class="form-control ckeditorActive"></textarea>
                </div>

            </div>
            <div class="modal-footer">
                <span>
                    <div class="d-flex justify-content-end">
                        <div class="spinner-border text-danger" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                </span>
                <div class="btn-modal">
                    <a href="#" id="" class="btn btn-primary saveAnexo">Salvar</a>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>                 
                </div>               
            </div>
        </form>
    </div>
</div>

Here I call the ckeditor

    <script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
<script type="text/javascript">
    CKEDITOR.replace('editor1', {
        uiColor: '#FDFDFD',
        removePlugins: 'resize',
        contentsCss: ['body {width: auto; height: auto;  padding: 0; font-family: "calibri";}'],
        toolbar: [{
                name: 'clipboard',
                items: ['PasteFromWord', '-', 'Undo', 'Redo']
            },
            {
                name: 'basicstyles',
                items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'Subscript', 'Superscript']
            },
            {
                name: 'links',
                items: ['Link', 'Unlink']
            },
            {
                name: 'paragraph',
                items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
            },
            {
                name: 'insert',
                items: ['Image', 'Table']
            },
            {
                name: 'editing',
                items: ['Scayt']
            },
            '/',

            {
                name: 'styles',
                items: ['Format', 'Font', 'FontSize']
            },
            {
                name: 'colors',
                items: ['TextColor', 'BGColor', 'CopyFormatting']
            },
            {
                name: 'align',
                items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
            },
            {
                name: 'document',
                items: ['Print', 'PageBreak', 'Source']
            }
        ],

    });
</script>

according to the image there, I can not click on the inputs to edit, only in the selects, which can be?

Answer 1

I appreciate the answers, yesterday morning I ended up solving and it is much simpler than I thought, as always it comes to programming.

I tried these scripts but unsuccessfully for me.

what I did was simply remove the attribute tabindex="-1" modal and everything worked normally.

Answer 2

I’ve had a similar problem before and I believe it will be good for you too.

This can happen when the Ckeditor dialog box is triggered within an active modal.  

Solution

Inside the folder of your plugin, at the root, there is a file called styles.js, inside that file go to the end of it and add that code snippet to the end of the file.

You can also add this snippet between tags scripts inside your page if the problem is only on that specific page.

$(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 
                && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') 
                && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')
            ) {
                modal_this.$element.focus()
            }
        })
    };
});

After saving the file, go back to your page, update it and try to create a table again in your editor.

Answer 3

I had the same problem also with the ckeditor opening in the modal using Bootstrap 4. I just found solution to solve for boostrap 3. After much research I found the solution. Goes below:

$.fn.modal.Constructor.prototype._enforceFocus = function _enforceFocus() {
    var _this4 = this;
    $(document).on(Event.FOCUSIN, function (event) {
        if (
            document !== event.target
            && _this4._element !== event.target
            && $(_this4._element).has(event.target).length === 0
            && !$(event.target.parentNode).hasClass('cke_dialog_ui_input_select')
            && !$(event.target.parentNode).hasClass('cke_dialog_ui_input_text')
        ) {
            _this4._element.focus();
        }
    });
};