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

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

Я прочитал этот пост: как использовать CKEditor в модальном Bootstrap?

но это отличается от меня, потому что я использую встроенный, и мне нужно просто применить 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

может кто-нибудь помочь мне, пожалуйста?

6
ckeditor html5 jquery twitter-bootstrap

3 ответов

проблема в том, что когда вы init CKEditor экземпляр, что цель времени скрыта, так что если вы создаете редактор после того, как цель отображается он будет wok:

поэтому вы просто ставите:

CKEDITOR.disableAutoInline = true;

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

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

Uncaught экземпляр редактора "myModalLabel" уже прикреплен к предоставленному элементу

обновление:

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

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

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

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

CKEDITOR.disableAutoInline = true;

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

Финальная Скрипка:http://jsfiddle.net/0vLs3fku/4/

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

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

    CKEDITOR.inline(name);
}
4

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

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

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

код:

$('#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/

3

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

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

    }

}
1