web-dev-qa-db-fra.com

Comment utiliser CKEditor dans un modal bootstrap?

Si j'utilise le plugin CKEditor dans une page HTML basée sur un modèle Bootstrap, cela fonctionne très bien, mais si j'insère l'éditeur sur un modal Bootstrap comme celui-ci

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

L'éditeur fonctionne, mais tous les contrôles de formulaire des fenêtres contextuelles de l'éditeur sont désactivés. Par exemple, si vous essayez d'ajouter un lien ou une image, vous ne pouvez pas insérer l'URL ni une description car les entrées sont désactivées.

Une solution de contournement pour ce problème?

Ceci est un exemple de violon: http://jsfiddle.net/7zDay/

twitter-bootstrapmodal-dialogckeditorjqmodal
20
Max

Cela devrait aider http://jsfiddle.net/pvkovalev/4PACy/ 

$.fn.modal.Constructor.prototype.enforceFocus = function () {
    var $modalElement = this.$element;
    $(document).on('focusin.modal', function (e) {
        var $parent = $(e.target.parentNode);
        if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length
            // add whatever conditions you need here:
            &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            $modalElement.focus()
        }
    })
};

Mise à jour d'octobre 2016: 

La liaison CDN pour CKEditor a été modifiée, j’ai donc mis à jour jsfiddle

49
Pavel Kovalev

Voir la réponse de aaronsnow à ce sujet sur le forum de ckeditor: http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap

Il a donné le code. Il suffit de mettre le code dans le fichier js et assurez-vous d'inclure le fichier après jquery et bootstrap

3
peterb

C’est tard pour répondre, mais le truc en css résoudra le problème. 

z-index par défaut de Bootstrap modal est 10051 et z-index par défaut de la boîte de dialogue ckeditor est 10010. L'astuce consiste simplement à augmenter l'indice z de la boîte de dialogue ckeditor comme indiqué ci-dessous. mettez le code ci-dessous dans votre fichier css: 

.cke_dialog
{
    z-index: 10055 !important;
}
3
Hossein Shahsahebi
  $(document).on({'show.bs.modal': function () {
                 $(this).removeAttr('tabindex');
      } }, '.modal');
1
BilgiSoft

Utilisez le script de travail à 100% ..

<script type="text/javascript">
    // Include this file AFTER both jQuery and bootstrap are loaded.
    $.fn.modal.Constructor.prototype.enforceFocus = function() {
      modal_this = this
      $(document).on('focusin.modal', function (e) {
        if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length 
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') 
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
          modal_this.$element.focus()
        }
      })
    };
</script>

Merci!

1
Chandra Kumar

Tout est très simple:

$('#modal').removeAttr('tabindex');

$('#modal').focusout(function(){
    $(this).css({'position':'relative'});
});

$('#modal').focusin(function(){
    $(this).css({'position':'fixed'});
});
0
Vova Batrakov

C'est très court et simple. importer des fichiers de configuration Javascript CKEditor à partir du chemin qu'ils ont stocké dans votre application. C'est à moi

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

Après cela, vous pouvez appeler CKEditor pour remplacer votre zone de texte en procédant ainsi.

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
Transformer

Il suffit d'ouvrir /core/config.js dans les fichiers ckeditor que de modifier " baseFloatZIndex "

baseFloatZIndex = 10000

à

baseFloatZIndex = 20000

Cela changera le début " z-index " de votre éditeur et les popups .

0
Chic Theme

Je ne sais pas, ma version est peut-être déjà corrigée, mais ma solution est la suivante:

    $("#messageModal").on('shown.bs.modal', function() {
     CKEDITOR.replace('message', {
       height: '400px',
       width: '100%'
     });
   })
0
Koloritnij

Je recevais Uncaught TypeError: Cannot read property 'fn' of undefined

Je viens donc de remplacer le $ dans le script fourni par @Pavel Kovalev ci-dessus par jQuery.

jQuery.fn.modal.Constructor.prototype.enforceFocus = function () {
    modal_this = this
    jQuery(document).on('focusin.modal', function (e) {
        if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
                && !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
                && !jQuery(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
            modal_this.$element.focus()
        }
    })
};
0
Mohd Abdul Mujib