2

O editor funciona, mas todos os controles de formulário nas janelas pop-up do editor estão desativados, se você tentar incluir um link ou uma imagem, por exemplo, não poderá inserir a URL ou qualquer descrição porque as entradas estão desativadas.

Qualquer solução alternativa para esse problema?

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

1 Resposta 1

2

Essa solução que você está usando só funciona no Bootstrap 3. No 4 você deve colocar um _ antes a propriedade enforceFocus, e pode deixar a função vazia.

Então troque tudo isso:

$.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()
        }
    })
};

Por apenas isso:

$.fn.modal.Constructor.prototype._enforceFocus = function(){};
11
  • Muito Obrigadooo Commented 28/03/2019 às 18:26
  • Muito boa, @Sam. Commented 15/10/2019 às 16:36
  • @Sam, desculpe. Eu não me recordava de ter usado isso. Em que local do código JS eu insiro esse seu trecho ? Commented 12/02/2020 às 12:39
  • Funcionou, @Sam. Obrigado mais uma vez. Já havia votado nessa resposta sua aqui, pena que não tem como votar novamente. Quer adicionar uma resposta lá na minha outra pergunta ou deixa quieto ? Commented 12/02/2020 às 12:59
  • 1
    @Jason-TheInternship. Achei melhor não responder porque esta aqui já resolve o problema.
    – Sam
    Commented 12/02/2020 às 13:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .