CKEditor встроенный в модальном бутстраповской окне

Question

мне нужно использовать CKEditor встроенный внутри модального бутстрапе, но это не работает ...

Я прочитал этот пост: How to use CKEditor in a Bootstrap Modal?

Но это отличается от меня, beacuse I Я использую inline, и мне нужно просто применить CKEditor к некоторым полям (у меня есть другие, которые используют свойство contenteditable).

JS КОД:

CKEDITOR.disableAutoInline = true; 
CKEDITOR.inline('myModalLabel'); 
CKEDITOR.inline('bodyModal'); 

$.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 
     // add whatever conditions you need here: 
     && 
     !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) { 
      modal_this.$element.focus() 
     } 
    }) 
}; 

HTML КОД

<button type="button" data-toggle="modal" data-target="#modalAddBrand">Launch modal</button> 

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

JSFiddle:

JSFiddle Example

Может кто-нибудь мне помочь?

Answer 1

Хорошо, в конце концов, я сделал микс из двух ответов ... и сейчас работает ... Что вы думаете?

$(document).ready(function(e) { 
    CKEDITOR.disableAutoInline = true; 
    CKEDITOR.inline('myModalLabel'); 
    CKEDITOR.inline('bodyModal'); 


    $('#myModal').on('shown.bs.modal', function() { 
     ckCreate('myModalLabel'); 
     ckCreate('bodyModal'); 
    }); 
}); 

function ckCreate(name) { 
    if (CKEDITOR.instances[name]) { 

     var instance = CKEDITOR.instances[name]; 
     if (instance.element.$) { 
      instance.destroy(true); 
     } 

     $('#' + name).attr('contenteditable', true); 
     CKEDITOR.inline(name); 

    } 

} 

Answer 2

Проблема заключается в том, что при инициализации экземпляра CKEditor, что время цель скрыта, так что если вы экземпляр редактора после целевой показан он будет вок:

Таким образом, вы просто положить:

CKEDITOR.disableAutoInline = true; 

$('#myModal').on('shown.bs.modal', function() { 
    CKEDITOR.inline('myModalLabel'); 
    CKEDITOR.inline('bodyModal'); 
}); 

Но после закрытия и повторного открытия модального вы можете получить сообщение об ошибке:

Uncaught The editor instance "myModalLabel" is already attached to the provided element

Обновление:

Для этого мы можем иметь функцию:

function ckCreate(name) 
{ 
    if(CKEDITOR.instances[name] === undefined) 
    { 
     CKEDITOR.inline(name); 
    } 
} 

только создать экземпляр, если он не существует;

Наконец ваш код будет:

CKEDITOR.disableAutoInline = true; 

$('#myModal').on('shown.bs.modal', function() { 
    ckCreate('myModalLabel'); 
    ckCreate('bodyModal'); 
}); 

Final Fiddle: http://jsfiddle.net/0vLs3fku/4/

Update: в необходимости уничтожения экземпляров

function ckCreate(name) 
{ 
    if (CKEDITOR.instances[name]) 
    { 
     CKEDITOR.instances[name].destroy(); 
    } 

    CKEDITOR.inline(name); 
} 

Answer 3

Кажется, известная ошибка влияет на WebKit/blink browsers. Причина этого в том, что когда элемент скрыт, атрибут contenteditable удаляется, и в этом случае экземпляр CKEDITOR должен быть уничтожен и воссоздан, атрибут contenteditable должен быть установлен в true.

По этой причине вы можете установить атрибут снова, когда будет показано диалоговое окно с использованием события shown.bs.modal.

Вы должны получить все дочерние элементы дочернего элемента открытого диалога.

Код:

$('#myModal').on('shown.bs.modal', function (e) { 
    $(this).find("*[contenteditable='false']").each(function() { 
     var name; 
     for (name in CKEDITOR.instances) { 
      var instance = CKEDITOR.instances[name]; 
      if (this && this == instance.element.$) { 
       instance.destroy(true); 
      } 
     } 
     $(this).attr('contenteditable', true); 
     CKEDITOR.inline(this); 
    }) 
}); 

Демо: http://jsfiddle.net/IrvinDominin/q5zxn3yf/