CKEditor in a bootstrap Modal

Question

I read many solutions about this How to use CKEditor in a Bootstrap Modal? and neither of them work for me. I feel desperate... js fiddle <- the code Im curently using:

JQuery 3.1.1
Bootstrap 3.3.7
Ckeditor 4.6.2

My html head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>

My modal:

<button type="button" data-toggle="modal" data-target="#modal">Launch modal</button>    
<!-- Modal -->
    <div class="modal fade" id="modal" role="dialog">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <form enctype="multipart/form-data" action="" method="post" class="form-horizontal">
            <div class="modal-body">
              <div class="form-group">
                <label for="text" class="col-lg-2 control-label">CKeditor:</label>
                <div class="col-lg-10">
                    <textarea class="form-control"  name="text" rows="8" maxlength="400" minlength="20" required></textarea>
                </div>    
              </div>
            </div>
            <div class="modal-footer">
              <a class="btn btn-danger" data-dismiss="modal">Fermer</span></a>
              <button class="btn btn-primary" type="submit">Envoyer</button>
            </div>
          </form>
        </div>
      </div>
    </div>

My ckeditor script:

window.onload = function() {
          CKEDITOR.replace('text');
      };

The editor works, but all the form controls on the popup windows of the editor are disabled, if you try to add a link or an image, for example, you cannot insert the URL or any description because the inputs are disabled. If I use keyboard shortcuts it work but this is the buttons who're causing issue. Always the same error:

Unable to get property 'specified' of undefined or null reference ckeditor.js (100,288)

Any workaround for this issue? image of the modal

Mohammad · Accepted Answer · 2017-02-13T11:11:57.557

IN TAG HEAD

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>

IN TAG BODY

<!-- HTML -->

<input type="button" id="btnModal" value="Open Modal" />

<!-- Modal -->
<div class="modal fade" id="modal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form enctype="multipart/form-data" action="" method="post" class="form-horizontal">
        <div class="modal-body">
          <div class="form-group">
            <label for="text" class="col-lg-2 control-label">CKeditor:</label>
            <div class="col-lg-10">


                <textarea name="editor1"></textarea>


            </div>    
          </div>
        </div>
        <div class="modal-footer">
          <a class="btn btn-danger" data-dismiss="modal">Fermer</a>
          <button class="btn btn-primary" type="submit">Envoyer</button>
        </div>
      </form>
    </div>
  </div>
</div>

IN JQUERY

$(document).on('click', '#btnModal', function(){
    $('#modal').modal('show');
  CKEDITOR.replace('editor1');
});

DEMO : jsfiddle

Hi, first thank you for your answer. I used your code in my local server and still no change... CKEditor is working with windows.onload() and $(document).ready() but the button arn't working in any case. I tried your js fiddle who's working and I tried to put my code which is above in js fiddle https://jsfiddle.net/Eelke_Johnson/abucpue5/ here and it work also! But still, in my local server wamp this isnt working unfortunately. — Olivier D'Ancona, Feb 13 '17 at 10:16
in local , change src js ckeditor . change to `https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js` — Mohammad, Feb 13 '17 at 10:41
All sources are working correctly it dont seems to be that because nothing changes. When I load it, I have the same result I posted on the image. If I use keyboard shortcut it work (like ctrl+B for bold) but this is the command buttons who're making troubles. — Olivier D'Ancona, Feb 13 '17 at 12:11

CKEditor in a bootstrap Modal

1 Answers1