녹아웃 데이터 바인딩이있는 TinyMCE

Question

선택한 개체에 따라 텍스트를 표시하는 TinyMCE WYSiWYG 편집기가 있지만 바인딩에 문제가 있습니다.

첫 번째 "instanciation는"작동하는 것 같다,하지만 사용할 수있는 텍스트의 드롭 다운 목록에서 새 텍스트를 선택할 때 편집기 공백 상태와 파이어 버그 콘솔은 나에게 말한다 :

형식 오류 : D.hasChildNodes는 함수가 아닙니다 ... ute (i), "string"== typeof r) {try {r = "true"=== r?! 0 : "false"=== r?! 1 : "null"=== ? R 널 (null) : + R ...

및

NS_ERROR_UNEXPECTED : 예기치 않은 오류 .../"$ 1")))}} false를 반환; 경우 (u.getParam ("accessibility_focus!"를)) {g.add (i.add (k, "a ...

여기 내 코드를 다시 만들려고했습니다 : http://jsfiddle.net/xc4sz/1/ 100 % 아니지만 적어도 작동하지 않습니다. ;)

텍스트 1에서 텍스트 2로 직접 이동하는 대신 "선택 옵션"을 사용하면 텍스트가 제대로 표시됩니다.

가 나는 아래의 "초기화"부분과 관련이있다 같아요

ko.bindingHandlers.tinymce = { 
    init: function (element, valueAccessor, allBindingsAccessor, context) { 
     var options = allBindingsAccessor().tinymceOptions || {}; 
     var modelValue = valueAccessor(); 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     var el = $(element) 

     //handle edits made in the editor. Updates after an undo point is reached. 
     options.setup = function (ed) { 
      console.log(ed) 
      ed.onChange.add(function (ed, l) { 
       if (ko.isWriteableObservable(modelValue)) { 
        modelValue(l.content); 
       } 
      }); 
     }; 

     //handle destroying an editor 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      setTimeout(function() { $(element).tinymce().remove() }, 0) 
     }); 

     //$(element).tinymce(options); 
     setTimeout(function() { $(element).tinymce(options); }, 0); 
     el.html(value); 

    }, 
    update: function (element, valueAccessor, allBindingsAccessor, context) { 
     var $element = $(element), 
         value = ko.utils.unwrapObservable(valueAccessor()), 
         id = $element.attr('id'); 

     //handle programmatic updates to the observable 
     // also makes sure it doesn't update it if it's the same. 
     // otherwise, it will reload the instance, causing the cursor to jump. 
     if (id !== undefined) { 
      var tinymceInstance = tinyMCE.get(id); 
      if (!tinymceInstance) 
       return; 
      var content = tinymceInstance.getContent({ format: 'raw' }); 
      if (content !== value) { 
       $element.val(value); 
       //this should be more proper but ctr+c, ctr+v is broken, above need fixing 
       //tinymceInstance.setContent(value,{ format: 'raw' }) 
      } 
     } 
    } 
}; 

Answer 1

당신에 의존 TinyMCE에 및 의 버전 jQuery를에 따라, 당신은 내가 최근에 자신을 압연 한 바인딩 정의를 시도하는 것 같아서.

GitHub에 그것은 사용할 수

및 NuGet

Answer 2

나는이 문제를 발견했다. 무슨 일이 것은이 있었다 : 당신이 Textbatch # 1을 선택하고 어떤 변화가

당신이 # 2

을 Textbatch로 전환 할

• THEN # 2
• ed.onChange.add 이벤트에 Textbatch # 1에서 올바르게 바인딩 변경 핸들러의 개막과 새로운 Textbatch 번호의와 이전 Textbatch # 1의 내용을 덮어 2

updated fiddle (URL에서 remove/show/light를 보시고 편집기로 돌아가십시오)를보십시오. select2.js을 인라인해야했는데, 왜냐하면 Github이 호스트하는 파일을 원격으로 포함 할 수 없기 때문입니다. 에디터의 제거는 최소 0 초 타임 아웃 지연되는 이유를 모르겠어요

ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
    $(element).tinymce().onChange.remove(changeHandler); 

    setTimeout(function() { $(element).tinymce().remove() }, 0) 
}); 

하지만위한 좋은 이유는 아마이 :

중요한 부분은 ko.utils.domNodeDisposal.addDisposeCallback입니다. 그래서 우리는 'change'핸들러를 제거하여 오래된 에디터가 뷰 모델의 바운드 valueAccessor를 더 이상 업데이트 할 수 없도록합니다.

편집 : 나는 당신의 바이올린을 수정했지만, 반드시 원래의 예외는 아니지만 주목했습니다 ... 여기 두 개가 관련되어 있기를 바랍니다.