CKeditor 툴바 버튼에 Google 웹 로그 분석 추가

Question

Ckeditor 4 툴바 버튼을 최소한으로 유지하려고하지만 사용자가 가장 많이 사용하는 버튼을 찾아야합니다. 따라서 툴바에 Google 애널리틱스를 추가하려고합니다. 버튼 클릭.

분석을 기록하기 위해 JS 이벤트를 시작하는 데 아무런 문제가 없습니다. 그러나 툴바 항목의 클릭 이벤트를 구체적으로 캡처하는 방법을 찾는 데 어려움을 겪고 있습니다. 바인딩 할 수있는 이벤트 콜백이 있습니까? 감사.

jquery ckeditor 커넥터를 사용하지 않아도되므로 이상적으로 사용할 수 있습니다. 그래도 Jquery 자체를 사용하는 것이 좋습니다.

Answer 1

나는 그것을 이해했다고 생각합니다. CKEDITOR 클래스 수준에서이 작업을 수행 할 수있는 방법이 없지만 개별 편집기 수준에서 수행 할 수 있습니다.

내 instanceReady 처리기 내부에 afterCommandExec 이벤트 처리기를 추가 할 수 있습니다.

CKEDITOR.on('instanceReady', function (e) { 

    var textarea_id, editor; 

    textarea_id = e.editor.name; 
    editor = CKEDITOR.instances[textarea_id]; 

    // Attach handler for events 
    editor.on('afterCommandExec', function (evt) { 
     // Record Analytic of toolbar bar & keypress events 

     // See http://docs.ckeditor.com/#!/api/CKEDITOR.command-property-state for vals 
     var cmd_name, cmd_prev_state, cmd_new_state; 

     cmd_name = evt.data.name; 
     cmd_prev_state = evt.data.command.state; 
     cmd_new_state = evt.data.command.previousState; 
     console.log([cmd_name, cmd_prev_state, cmd_new_state]); 

     // Call analytics event next ... 
    }); 
}) 

참고 : 글로벌 CKEDITOR 레벨

• 이벤트 콜백 : 에디터 인스턴스 수준 http://docs.ckeditor.com/#!/api/CKEDITOR-event-instanceReady

• 이벤트 콜백 : http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-afterCommandExec