title.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  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. /* globals console, window, document, setTimeout */
  6. import BaloonBlockEditor from '@ckeditor/ckeditor5-build-balloon-block/src/ckeditor';
  7. import Title from '@ckeditor/ckeditor5-heading/src/title';
  8. import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
  9. BaloonBlockEditor.builtinPlugins.push( Title );
  10. BaloonBlockEditor
  11. .create( document.querySelector( '#snippet-title' ), {
  12. cloudServices: CS_CONFIG,
  13. blockToolbar: [ 'bulletedList', 'numberedList', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed' ]
  14. } )
  15. .then( editor => {
  16. window.editor = editor;
  17. const titlePlugin = editor.plugins.get( 'Title' );
  18. const titleConsole = new Console( document.querySelector( '.title-console__title' ) );
  19. const bodyConsole = new Console( document.querySelector( '.title-console__body' ) );
  20. const dataConsole = new Console( document.querySelector( '.title-console__data' ) );
  21. editor.model.document.on( 'change:data', () => {
  22. titleConsole.update( titlePlugin.getTitle() );
  23. bodyConsole.update( titlePlugin.getBody() );
  24. dataConsole.update( editor.getData() );
  25. } );
  26. } )
  27. .catch( err => {
  28. console.error( err.stack );
  29. } );
  30. class Console {
  31. constructor( element ) {
  32. this.element = element;
  33. this.consoleUpdates = 0;
  34. this.previousData = '';
  35. }
  36. update( data ) {
  37. if ( this.previousData == data ) {
  38. return;
  39. }
  40. this.previousData = data;
  41. const element = this.element;
  42. this.consoleUpdates++;
  43. element.classList.add( 'updated' );
  44. element.textContent = `'${ data }'`;
  45. setTimeout( () => {
  46. if ( --this.consoleUpdates == 0 ) {
  47. element.classList.remove( 'updated' );
  48. }
  49. }, 500 );
  50. }
  51. }