word-count-update.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* global window, document, console, ClassicEditor */
  6. ClassicEditor
  7. .create( document.querySelector( '#demo-editor-update' ), {
  8. toolbar: {
  9. items: [
  10. 'heading',
  11. 'bold',
  12. 'italic',
  13. 'bulletedList',
  14. 'numberedList',
  15. 'blockQuote',
  16. 'link',
  17. '|',
  18. 'mediaEmbed',
  19. 'insertTable',
  20. '|',
  21. 'undo',
  22. 'redo'
  23. ],
  24. viewportTopOffset: window.getViewportTopOffsetConfig()
  25. },
  26. table: {
  27. contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
  28. }
  29. } )
  30. .then( editor => {
  31. const wordCountPlugin = editor.plugins.get( 'WordCount' );
  32. const progressBar = document.querySelector( '.customized-counter progress' );
  33. const colorBox = document.querySelector( '.customized-counter__color-box' );
  34. wordCountPlugin.on( 'update', updateHandler );
  35. function updateHandler( evt, payload ) {
  36. progressBar.value = payload.words;
  37. colorBox.style.setProperty( '--hue', payload.characters * 3 );
  38. }
  39. } )
  40. .catch( err => {
  41. console.error( err.stack );
  42. } );