-2

I am trying to use ckeditor inline with knockoutjs in a modal dialog. But it is not working. Ckeditor all buttons are diasbled. It is not working only chrome browser. It is working on firefox and ie. I found a solution but it is not great for me. Problem is about modal showing status. 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" contenteditable="true" id="myModalLabel">Modal title</h4>
            </div>
            <div id="bodyModal" contenteditable="true" class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-default navbar-btn  margin-right-button-nav" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-new-window"></span> Edit Modal</button>

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

Here is a Fiddle

Jeff Mercado
  • 129,526
  • 32
  • 251
  • 272
Mustafa KIRILMAZ
  • 131
  • 1
  • 3
  • 7

2 Answers2

0

You have to use bootstrap modal events like shown.bs.modal

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

Here is the updated jsFiddle : http://jsfiddle.net/8t882a2s/3/

And an other answer with more information : https://stackoverflow.com/a/25786444/4682796

Community
  • 1
  • 1
jmgross
  • 2,306
  • 1
  • 20
  • 24
  • First of all Thank you. But I found this solution before.. Are there another way for this problem? – Mustafa KIRILMAZ Apr 16 '15 at 10:27
  • Maybe no, because the element have to be visible before CKEditor is active – jmgross Apr 16 '15 at 11:18
  • Hi, I don't know if you noticed but when you open the modal an try do add a Link you can't write anything in the input of the link. Do you know what causing this? and how can we fix it? – patricia Dec 13 '16 at 11:24
0
// My problem was chkeditor drop down was not working propely ON IE.

this worked for me.follow below step to implement.

1. this below line of code will execute after jquery and bootstrap javascript load.
i.e 
1. register the jquery version file
2. bootstrap java script load
3. then execute this code

$.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_contents cke_reset')) {
                modal_this.$element.focus()
            }

        })
    };
mamta garg
  • 1