twitter bootstrap - plantillas - ¿Cómo usar CKEditor en un Bootstrap Modal?

install doku wiki

Question

Si uso el complemento CKEditor en una página HTML basada en una plantilla Bootstrap, funciona bien, sin embargo, si inserto el editor en un Bootstrap Modal como este

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

El editor funciona, pero todos los controles de formulario en las ventanas emergentes del editor están deshabilitados, si intenta agregar un enlace o una imagen, por ejemplo, no puede insertar la URL o ninguna descripción porque las entradas están deshabilitadas.

¿Alguna solución para este problema?

Este es un ejemplo de violín: http://jsfiddle.net/7zDay/

Answer 1

Esto debería ayudar 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()
        }
    })
};

Actualización de octubre de 2016:

El enlace CDN para CKEditor ha sido cambiado, así que actualicé jsfiddle

Answer 2

Esto es muy corto y simple. importe los archivos de configuración de Javascript de CKEditor desde la ruta que están almacenados en su aplicación. Esto es mío

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

Después de esto, puede llamar a CKEditor para reemplazar su área de texto haciendo esto

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>

Answer 3

Esto es tarde para responder, pero hacer truco css resolverá el problema.

El z-index predeterminado de Bootstrap modal es 10051 y el z-index predeterminado del diálogo de ckeditor es 10010 . El truco es simplemente aumentar el índice z de ckeditor dialog como se muestra a continuación. ponga abajo el código en su archivo css:

.cke_dialog
{
    z-index: 10055 !important;
}

Answer 4

No sé, tal vez en mi versión ya esté arreglado, pero mi solución es:

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

Answer 5

Recibí Uncaught TypeError: Cannot read property ''fn'' of undefined

Así que simplemente reemplacé $ dentro del script proporcionado por @Pavel Kovalev arriba de 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()
        }
    })
};

Answer 6

Simplemente abra /core/config.js en archivos ckeditor para cambiar la variable " baseFloatZIndex "

baseFloatZIndex = 10000

a

baseFloatZIndex = 20000

Cambiará el inicio " índice z " de su caja de editor y las ventanas emergentes .

Answer 7

Todo muy simple:

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

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

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

Answer 8

Usa el script de trabajo al 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>

¡Gracias!

Answer 9

Vea la respuesta de aaronsnow a este hilo en el foro de ckeditor: http://ckeditor.com/forums/Support/Issue-with-Twitter-Bootstrap

Él ha dado el código. Simplemente coloque el código en el archivo js y asegúrese de incluir el archivo después de jquery y bootstrap

Answer 10

  $(document).on({''show.bs.modal'': function () {
                 $(this).removeAttr(''tabindex'');
      } }, ''.modal'');