У меня есть ситуация с KnockoutJS и CKEditor.
В принципе, у нас есть часть нашего сайта, который является стилем приложения "одна страница", в настоящее время он включает всего 2 страницы, но со временем будет расширяться, в настоящее время это просто страница "списки" и страница "Управление" для элементов в списке.
Сама страница управления требует своего рода богатого текстового редактора, мы пошли с CKEditor для решения для всей компании.
Поскольку эти 2 страницы являются "одностраничными", очевидно, CKEditor не может регистрироваться на элементах управления, потому что их нет на странице загрузки - достаточно простая проблема для исправления. Итак, в качестве примера я приложил CKEditor к событию click, которое отлично работало. Следующая проблема заключалась в том, что тогда наблюдаемые нотауты, которые были установлены, не обновлялись, потому что CKEditor фактически не модифицирует прикрепленное к нему текстовое поле, он создает все эти элементы div/html, которые вы фактически редактируете.
После немного googleing я нашел пример того, кто делает это с TinyMCE - http://jsfiddle.net/rniemeyer/GwkRQ/, поэтому я думал, что смогу адаптировать что-то похожее на это для CKEditor.
В настоящее время я довольно близок к тому, чтобы иметь рабочее решение, у меня есть его инициализация и обновление правильных наблюдаемых с использованием этой техники (я буду писать код внизу) и даже правильно отправить сообщение на сервер - фантастично.
Проблема, с которой я столкнулся в настоящее время, связана с частью приложения "Single Page" и повторной инициализацией CKEditor.
В основном, что происходит, вы можете щелкнуть по списку для управления, а затем сохранить (который возвращается к странице списка), а затем, когда вы переходите к другому "управлению", CKEditor инициализируется, но в нем нет никаких значений, я 'проверили код обновления (см. ниже), и' value 'определенно имеет правильное значение, но оно не попадает в сам CKEditor.
Возможно, это недостаточное понимание процесса потока/инициализации для CKEditor или непонимание связей с нокаутом или, возможно, проблема с инфраструктурой, которая была настроена для нашего приложения с одной страницей. Я не уверен.
Вот код:
//Test one for ckeditor
ko.bindingHandlers.ckeditor = {
init: function (element, valueAccessor, allBindingsAccessor, context) {
var options = allBindingsAccessor().ckeditorOptions || {};
var modelValue = valueAccessor();
$(element).ckeditor();
var editor = $(element).ckeditorGet();
//handle edits made in the editor
editor.on('blur', function (e) {
var self = this;
if (ko.isWriteableObservable(self)) {
self($(e.listenerData).val());
}
}, modelValue, element);
//handle destroying an editor (based on what jQuery plugin does)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
var existingEditor = CKEDITOR.instances[element.name];
existingEditor.destroy(true);
});
},
update: function (element, valueAccessor, allBindingsAccessor, context) {
//handle programmatic updates to the observable
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).html(value);
}
};
Итак, в HTML это довольно стандартный нокаут "data-bind: ckeditor", который применяет привязки для него при инициализации ViewModel.
Я отложил отладчик; в коде, чтобы увидеть поток, он выглядит, когда я загружаю первый раз, когда он вызывает init, а затем обновляет, когда я во второй раз ударяю ko.utils.domNodeDisposal, чтобы избавиться от элементов.
Я пробовал не уничтожать его, который CKEditor тогда жалуется, что что-то уже существует с этим именем. Я попытался не уничтожить его и проверить, существует ли он и инициализировать его, если это не так - это работает впервые, но во второй раз у нас нет CKEditor.
Я считаю, что только одна вещь, которую я пропускаю, заставит ее работать, но я исчерпал все варианты.
Есть ли у кого-нибудь знания по интеграции этих трех вещей, которые могут помочь мне?
Есть ли какие-нибудь эксперты-нокауты, которые могли бы мне помочь?
Любая помощь будет высоко оценена.
MD
