tinymce로 바인딩 녹아웃

Question

knockout 3.0.0과 tinymce 4.0.18을 사용하려고합니다.

like this : 몇 가지 편집 가능한 요소 (여기 3 개)를 만들고 싶지만 이러한 요소는 녹아웃에서 가져옵니다. tinyMCE없이이 작업을 수행하는 것은 문제가되지 않습니다 (여기는 my attempt).

그러나 나는 이런 식으로 뭔가를 수행하여 같은 result with tinyMCE을 달성하려고하면

function ViewModel() { 
    var self = this; 
    self.editableAreas = ko.observableArray([{ 
     id : 1, 
     txt: ko.observable('first text area'), 
    },{ 
     id : 2, 
     txt: ko.observable('second text area'), 
    },{ 
     id : 3, 
     txt: ko.observable('all observable text area'), 
    }]); 
} 

ko.applyBindings(new ViewModel()); 

tinymce.init({ 
    selector: "div.editableArea", 
    schema: "html5", 
    inline: true, 
    toolbar: "bold italic underscore", 
    menubar: false 
}); 

내가 TinyMCE에 대한 (first 바인딩 second)를 두 개의 사용자 정의 바인딩을 발견 조금 큰 인터넷 검색. 이것이 최선의 접근 방법이며 의도 한대로 작동하도록 내 피들을 어떻게 수정할 수 있습니까?

Answer 1

viewModel에 DOM 요소를 바인딩하기 위해 bindingHandler를 사용하는 것이 올바른 방법입니다. 연결된 바인딩 핸들러 중 하나만 포함하면됩니다. 내가 updated your jsfiddle using the second bindingHandler (아무 것도 모르기 때문에 아무 것도 선택하지 않기 때문에 무작위로 선택 함). 를 포함한 후 bindingHandler (그리고 JQuery와 그것을에 의존 보인다 jquery.tinymce.min.js) 나는 bindingHandler 사용하려면, 다음에 HTML을 업데이트한다 : 나는이이 경우

<div data-bind="foreach: editableAreas"> 
    <div class="editableArea" data-bind="wysiwyg: txt, wysiwygConfig: {  
     schema: 'html5', 
     inline: true, 
     toolbar: 'bold italic underscore', 
     menubar: false 
    } "></div> 
</div> 

을 보기에서 tinymce 구성. viewModel에서이 속성을 속성으로 사용하려면 변경해야합니다 (예 : code)