How to use CKEditor in a Bootstrap Modal?

后端 未结 14 1173
名媛妹妹
名媛妹妹 2020-11-30 04:14

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

<         


        
相关标签:
14条回答
  • 2020-11-30 04:41

    This is very short and simple. import CKEditor Javascript config files from the path they are store in your app. This is mine

    <script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
    <script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
    

    After this you can call CKEditor to replace your textarea by doing this

    CKEDITOR.replace('topic', {
              uiColor: '#9AB8F3',
    			    language: "en-us",
    			    toolbar: "Custom",
              height: "200",
              width: "400",
    			    skin: "moono",
    			    toolbar_Custom: [
    			    	["Bold", "Italic", "Underline"], 
    			    	["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"], 
    			    	["Link", "Unlink"]
    			    ],  
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://cdn.ckeditor.com/4.3.4/standard/ckeditor.js"></script>
    
    
    <!-- Modal --> 
    <div class="modal fade" id="modalAddBrand" tabindex="-1" role="dialog">
            <div class="modal-dialog">
            	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <div class="modal-content">
                    <div class="user-box">
                        <h2>Create a new discussion</h2>
                        <form method="post" id="discussion_add" action="#">
    	                    <!--FORM FIELD START-->
    	                    <div class="form">
    	                        <div class="input-container">
    	                            <input type="text" id="id_session" name="session" required="true">
    	                        </div>
    	                        <div class="input-container">
    	                        	<textarea cols="40" id="id_topic" name="topic" rows="10"></textarea>
    	                        </div>
    
    	                        <div class="input-container">
    	                            <button class="btn-style">Create Discussion</button>
    	                        </div>
    	                    </div>
    	                </form>                
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    <button data-toggle="modal" data-target="#modalAddBrand">Launch Modal</button>

    0 讨论(0)
  • 2020-11-30 04:44

    All very simple:

    $('#modal').removeAttr('tabindex');
    
    $('#modal').focusout(function(){
        $(this).css({'position':'relative'});
    });
    
    $('#modal').focusin(function(){
        $(this).css({'position':'fixed'});
    });
    
    0 讨论(0)
  • 2020-11-30 04:44

    I think i found some solution for this.

    As @Pavel Kovalev suggested it have something to do with boostraps 4 JS and focus in modal script. I had just same problem as Yours.

    There is an option for modals called "focus" which sets focus on initialized modals. Disabling this option makes all Your inputs in CKEditors modals work as they should. Not having focus on this modal i can live without :)

    See details here: https://getbootstrap.com/docs/4.3/components/modal/#options

    In my approach to this i finaly got something like this:

    <div class="modal fade" data-focus="false" id="newsAdd" role="dialog" aria-labelledby="fieldAdd" aria-hidden="true">
    ...
    </div>
    

    Also it is propably good idea for some more extensive testing, especialy if You have multiple bootstrap modals with CKEditor on one page.

    As for the all the "fixes" You can propably find on web. Have a look that they most likely refer to bootstrap 3 where events on modal are different so they simply cannot work. Including @Pavel Kovalev solution.

    0 讨论(0)
  • 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

    0 讨论(0)
  • 2020-11-30 04:48

    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;
    }
    
    0 讨论(0)
  • 2020-11-30 04:52

    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.

    0 讨论(0)
提交回复
热议问题