CKEditor is integrated into the bootstrap modal window

Question

I need to use CKEditor inside inside a modal bootstrap, but it does not work ...

I read this post: How to use CKEditor in Bootstrap module?

But this is different, I use the built-in string, and I just need to apply CKEditor to some fields (I have others that use the contenteditable property).

JS CODE:

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 code

 <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

Can anybody help me?

Answer 1

Well, in the end, I made a combination of two answers ... and now it works ... What do you think?

 $(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

The problem is that when you start the CKEDITOR instance, this time target is hidden, so if you create an editor instance after showing the target, it will wok:

So you just put:

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

But after closing and reopening the modal code, you may receive an error message:

Missed Instance of the editor "myModalLabel" is already attached to the provided item

Update:

To do this, we can have a function:

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

create an instance only if it does not exist;

Finally, your code will look like this:

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

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

Update: need to destroy instances

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

Answer 3

This seems to be a known bug affecting webkit / blink browsers. The reason is that when the element is hidden, the contenteditable attribute is deleted, in which case the CKEDITOR instance must be destroyed and recreated, the contenteditable attribute must be set to true.

For this reason, you can set the attribute again when the dialog box is displayed using the shown.bs.modal event.

You should get all ex contenteditable elements of the children of the open dialog.

code:

 $('#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); }) }); 

Demo: http://jsfiddle.net/IrvinDominin/q5zxn3yf/