How to use CKEditor in a Bootstrap Modal?

2019-01-08 22:56发布

If I use the CKEditor plugin in an HTML page based on a Bootstrap template, it works great, however if I insert the editor on a Bootstrap Modal like this

<!-- Modal --> 
<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 brand</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>            <script>
             CKEDITOR.replace('editor1');
             </script>
             </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>

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.

Any workaround for this issue?

This is a fiddle example: http://jsfiddle.net/7zDay/

10条回答
我欲成王,谁敢阻挡
2楼-- · 2019-01-08 23:37

See the response from aaronsnow to this thread on the ckeditor forum: http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap

He's given the code. Just put the code in js file and make sure you include the file after the jquery and bootstrap

查看更多
我命由我不由天
3楼-- · 2019-01-08 23:37
  $(document).on({'show.bs.modal': function () {
                 $(this).removeAttr('tabindex');
      } }, '.modal');
查看更多
Lonely孤独者°
4楼-- · 2019-01-08 23:40

Just open /core/config.js in ckeditor files than change "baseFloatZIndex" variable

baseFloatZIndex = 10000

to

baseFloatZIndex = 20000

It will change the start "z-index" of your editor box and the popups.

查看更多
狗以群分
5楼-- · 2019-01-08 23:44

This is late to answer but doing css trick will solve the issue.

Default z-index of Bootstrap modal is 10051 and default z-index of ckeditor dialog are 10010. The trick is just to increase ckeditor dialog z-index as below. put below code in your css file:

.cke_dialog
{
    z-index: 10055 !important;
}
查看更多
登录 后发表回答