CKEditor в бутстрапе Modal

Question

Я читал много решений об этом How to use CKEditor in a Bootstrap Modal?, и ни один из них не работает для меня. Я чувствую себя отчаянным ... js fiddle < - код Im curently с помощью:

• JQuery 3.1.1
• Bootstrap 3.3.7
• CKEditor 4.6.2

Мой HTML руководитель:

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

Мой модальный:

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

Мой CKEditor сценарий:

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

Главный редактор работает, но все элементы управления формы на всплывающие окна редактора отключены, если вы пытаетесь добавить ссылку или изображение, например, вы не может вставлять URL-адрес или какое-либо описание, потому что входы отключены. Если я использую сочетания клавиш, это работает, но это кнопки, которые вызывают проблему. Всегда такая же ошибка:

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

Любое обходное решение для этой проблемы? image of the modal

Answer 1

В TAG РУКОВОДИТЕЛЯ

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

в теге 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> 

В Jquery

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

DEMO: jsfiddle