Question

我正在尝试在模态对话框中使用ckeditor内联knockoutjs。但它没有用。 Ckeditor所有按钮都是diasbled。它不仅仅是Chrome浏览器。它正在使用firefox和ie。我找到了解决方案，但对我来说并不好。问题是关于模态显示状态。

<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

Answer 1

你必须使用像shown.bs.modal

这样的引导模态事件

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

以下是更新的jsFiddle：http://jsfiddle.net/8t882a2s/3/

另一个答案包含更多信息：https://stackoverflow.com/a/25786444/4682796

Answer 2

// 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()
            }

        })
    };

Ckeditor不在模态对话框中工作

2 个答案: