NicEdit을 녹아웃과 함께 사용

Question

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'); 

여기

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

덕분에 어떤 통찰력을위한 HTML.

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 "ID"가 충돌 그렇지 않으면 속성이 있어야합니다

  는이 "제한"이 있습니다.

• IE (적어도 버전 8)에서는 DOMNodeInserted과 DOMNodeRemoved이 실행되지 않습니다. 즉, 관찰 대상 개체에서 올바르게 업데이트되도록 텍스트 스타일을 수정 한 후에 무언가를 입력해야한다는 의미입니다.