1

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

1 Answer 1

5

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

3
  • 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 jsfiddle.net/Eelke_Johnson/abucpue5 here and it work also! But still, in my local server wamp this isnt working unfortunately. Feb 13, 2017 at 10:16
  • in local , change src js ckeditor . change to https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js
    – Mohammad
    Feb 13, 2017 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. Feb 13, 2017 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.