knockout js 'article'미리보기 상자

최근에 knockoutjs가 선택되었으며 wysiwyg 편집기 안에 HTML을 div로 렌더링하는 미리보기 상자를 만들려고합니다. 지금 나는 div에서 렌더링하기 위해 작성한 텍스트를 얻으려고하지만 wysiwyg 편집기와 충돌하는 것 같습니다. 정상적인 <textarea> 필드에 쓰여진 텍스트를 렌더링하여 스크립트를 테스트했지만 문제가 없습니다. 그러나 wysiwyg 편집기에서 동일한 작업을 시도 할 때 아무 것도 렌더링하지 않습니다.knockout js 'article'미리보기 상자

저는 CKeditor btw를 사용하고 있습니다. 나는 기본적으로이 있습니다

<textarea name="body" data-bind="value: body"></textarea> 
<script type="text/javascript"> 
    CKEDITOR.replace('body'); 
</script>

Ckeditor는 편집자 인터페이스로 대체 얻을 것이다 기본적으로 '몸'이라는 <textarea> 필드를 필요로한다.

스크립트 자체는 내가 언급했듯이 정상적인 <textarea>에서 작동하지만 <textarea>에서 CKEDITOR.replace을 실행하면 좋아하지 않는 것처럼 보입니다.

출처

2013-04-17 ejx

Firebug 또는 Chrome 개발자 도구를 사용하여 CKeditor가 생성하는 HTML이 무엇인지 확인하십시오. 텍스트 영역을 다른 요소로 대체 할 수 있습니다. –

문제는 ckeditor가 contenteditable로 대체하고 알려진 값 바인딩이 없다는 것입니다. 이를 수행하기 위해 customBindingHandler를 작성할 수 있습니다. 나는 전에 CLEditor에 대해 썼다. 여기가

ko.bindingHandlers.cleditor = { 
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)    { 

    var modelValue = valueAccessor(); 
    var options = {} 

    if (allBindingsAccessor().cleditorOptions) 
     options = $.extend(options, allBindingsAccessor().cleditorOptions); 

    var ko_editor = $(element).cleditor(options); 

    if (allBindingsAccessor().cleditorCSS) { 
     var cssLink = ko_editor[0].doc.createElement("link"); 
     cssLink.rel = "stylesheet"; 
     cssLink.type = "text/css"; 
     cssLink.href = allBindingsAccessor().cleditorCSS; 
     if (ko_editor[0].doc.head === undefined) { 
      var headElement = ko_editor[0].doc.getElementsByTagName('head'); 
      headElement[0].appendChild(cssLink); 
     } 
     else 
      ko_editor[0].doc.head.appendChild(cssLink); 
    } 

    ko_editor[0].change(
     function (a) { 
      var elementValue = ko_editor[0].doc.body.innerHTML; 

      if (ko.isWriteableObservable(modelValue)) { 
       modelValue(elementValue); 
      } 
      else { //handle non-observable one-way binding 
       var allBindings = allBindingsAccessor(); 
       if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].htmlValue) allBindings['_ko_property_writers'].htmlValue(elementValue); 
      } 
     } 
    ); 

}, 
update: function (element, valueAccessor) { 
    var value = ko.utils.unwrapObservable(valueAccessor()) || ""; 
    var ko_editor = $(element).cleditor(); 
    if (ko_editor[0].doc.body.innerHTML !== value) { 
     ko_editor[0].doc.body.innerHTML = value; 
     ko_editor[0].focus(); 
    } 
} 
};

같은 외모와 HTML은 CSS를, 그래서 당신은 이제 (값이 저장되는 위치입니다) 관찰라는 바디를 제공 할 수있는이

<textarea rows="20" data-bind="cleditor: Body, cleditorCSS: 'path/ComposeEditor.css', cleditorOptions:$root.EditorOptions"></textarea>

처럼 보일 것이다 것입니다 viewmodel에 지정된 옵션.

호프가 도움이됩니다.

출처

2013-04-17 15:38:32

knockout js 'article'미리보기 상자

답변

관련 문제