2013-12-22 2 views
1

TinyMCE 편집기를 사용하고 단어 수 값을 녹아웃 변수에 지정하려고합니다. 편집기를 설정하는 것이 좋으며 단어 수 값을 표시하지만 실제 값을 가져 오는 방법을 이해할 수 없습니다.녹아웃 데이터 바인딩의 TinyMCE 단어 수

이 녹아웃 값의보기이다 :

<div data-bind="with: SelectedText"> 
    No. of words is: <span data-bind="value: TextWordCount"></span> 
</div> 

을하지만 그것은 카운트 TinyMCE에 단어에 어떻게 연결합니까?

<span data-bind="value: TextWordCount"></span> 

는 "텍스트를 사용하며, 모든 http://jsfiddle.net/ZvKTn/3/

첫째 : 나는 그것을 작동하게하는 당신의 바이올린을 일부 변경했습니다 http://jsfiddle.net/ZvKTn/1/

+0

난 두려워 없지만 단어 수 플러그인의 현재 구현 : https://github.com/tinymce/tinymce/blob/master/js/tinymce/plugins/wordcount/plugin.js는 더있다 플러그인을 수정하거나 자신의 코드에서 그 기능을 복제하지 않고 관찰 할 수있는 단어 수를 얻는 쉬운 방법 ... – nemesv

+1

필자가 동의하지 않는 한,'wordcount' 플러그인에서 값을 추출하는 아주 간단한 방법이있다.'editor.plugins [ 'wordcount']. getCount()'. 나는 이것을 곧 설명 할 대답을 줄 것이다. –

답변

1

: 여기

는 바이올린입니다 "대신 바인딩 :

<span data-bind="text: TextWordCount"></span> 

TinyMCE onKeyUp 이벤트에 연결하여 편집기에서 텍스트를 입력하는 동안 실시간 업데이트를 얻는 것 이외에.

또한 데이터를 복제하는 코드에 문제가있었습니다.

나는 계산에 관측에서 TextWordCount을 변경 :

약속대로
self.TextWordCount = ko.computed(function() { 
    // First remove all html tags 
    var text = self.TextbatchText().replace(/<[^>]*>/g, ''); 
    // Tiny MCE inserts an extra &nbsp; at the end if you "double space" the end of your sentence. This replaces it with a normal space 
    text = text.replace(/&nbsp;/g, ' '); 
    // This merges all spaces and tabs following each other into a single space 
    text = text.replace(/[\s\t]+/g, ' '); 
    // This removes spaces and the begin and end of the text 
    text = text.replace(/^\s*/, '').replace(/\s*$/, ''); 

    // This splits the string into an array of words separated by a space. 
    return text.split(' ').length; 
}); 
+0

이것은 쉽지는 않습니다. 단지'/ [\ s \ t] + /'로 분리하는 것만으로는 충분하지 않으므로 편집기에 형식이 사용되지 않으면 솔루션이 작동합니다. http://jsfiddle.net/GssN7/에서 텍스트를 선택하십시오 : "이것은 첫 번째 텍스트입니다"다음 툴바의 정렬 센터를 클릭하십시오 : 5에서 7로 단어가 변경되었습니다 ... – nemesv

+0

여기 있습니다 에디터가 사용하는 포맷팅을 처리하는 대안 : https://gist.github.com/tamewhale/581361 –

+0

nemesv, 텍스트를 입력하는 동안 TextWordCount가 업데이트되지 않는 것을 제외하면 바이올린이 거의 작동하고 단어로 두 번 공백이 계산됩니다. . 아마도 그리스어로 된 논리 표현을 설명 할 수 있습니다. /[\ s \ t] +/do,/(< ([^>) +) <)/g는 무엇을합니까? –

2

는, 모두가 될 조금 늦게, 여기 내 솔루션입니다. 다시 쓰거나 해킹 할 필요가 없습니다. 나는 심지어 working demo을 볼 수있는 나의 tinymce-knockout-binding의 최신 버전에이 요구 사항을 포함시킬 자유를 취했다.

요약하면 키는 다음 코드 세그먼트입니다.

'setup': function(editor) { 
    editor.on('change keyup nodechange', function(args) { 
     var accessor = allBindings.get('wysiwygCount'); 
     if (editor.plugins['wordcount']) { 
      accessor(editor.plugins['wordcount'].getCount()); 
     } 
    } 
} 
관련 문제