Использование NicEdit с нокаутом

Question

Я ищу, чтобы создать пользовательскую привязку Knockout для использования с редактором WYSIWYG NicEdit http://nicedit.com/index.php. Я нашел пример скрипта того, что похоже на аналогичную привязку для библиотеки TinyMCE, но не имело успеха в репликации для моих нужд.

http://jsfiddle.net/rniemeyer/GwkRQ/

Кто создал рабочий обычай обязательные для этого раньше, или кто-нибудь нашли любую другую работу вокруг этого? Когда экземпляр NicEditor применяется обычно, он, как представляется, обновляет значение прикрепленного файла, но не вызывает обновление наблюдаемого нокаута.

В качестве примера, использование следующих javascript и html не приводит к допустимому результату.

JS здесь

var viewModel = { 
    content: ko.observable("<p>I want this text to load and change in the editor</p>"), 
}; 

ko.applyBindings(viewModel); 
new nicEditor().panelInstance('testTextArea'); 

HTML здесь

<form method="post" action="somepage"> 
    <textarea id="testTextArea" name="content" style="width:100%" data-bind="value: content"></textarea> 
</form> 

Спасибо за любые идеи.

Answer 1

Я придумал следующее обязательное связывание, которое, похоже, работает. Я использую немного JQuery, но не так много, поэтому вы всегда можете заменить его чем-то не-JQuery.

Обычай связывания:

ko.bindingHandlers.nicedit = { 
    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     var area = new nicEditor({fullPanel : true}).panelInstance(element.id, {hasPanel : true}); 
     $(element).text(ko.utils.unwrapObservable(value)); 

     // function for updating the right element whenever something changes 
     var textAreaContentElement = $($(element).prev()[0].childNodes[0]); 
     var areachangefc = function() { 
      value(textAreaContentElement.html()); 
     }; 

     // Make sure we update on both a text change, and when some HTML has been added/removed 
     // (like for example a text being set to "bold") 
     $(element).prev().keyup(areachangefc); 
     $(element).prev().bind('DOMNodeInserted DOMNodeRemoved', areachangefc); 
    }, 
    update: function(element, valueAccessor) { 
     var value = valueAccessor(); 
     var textAreaContentElement = $($(element).prev()[0].childNodes[0]); 
     textAreaContentElement.html(value()); 
    } 
}; 

И как его использовать:

<textarea id="area1" data-bind="nicedit: title" style="width: 640px"></textarea> 

... где в моем примере "название" ваша оценка недвижимости, конечно.

Есть два «ограничения»:

• текстовое поле должно быть DOM «идентификатор» атрибут в противном случае он выходит из строя.
• С IE (по крайней мере, версия 8) DOMNodeInserted и DOMNodeRemoved не запускаются, что означает, что вам нужно набрать что-то после изменения стиля вашего текста, чтобы он был правильно обновлен в вашем наблюдаемом объекте.