title.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. /**
  2. * @license Copyright (c) 2003-2020, 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: [
  14. 'bulletedList',
  15. 'numberedList',
  16. '|',
  17. 'outdent',
  18. 'indent',
  19. '|',
  20. 'imageUpload',
  21. 'blockQuote',
  22. 'insertTable',
  23. 'mediaEmbed'
  24. ]
  25. } )
  26. .then( editor => {
  27. window.editor = editor;
  28. const titlePlugin = editor.plugins.get( 'Title' );
  29. const titleConsole = new Console( document.querySelector( '.title-console__title' ) );
  30. const bodyConsole = new Console( document.querySelector( '.title-console__body' ) );
  31. const dataConsole = new Console( document.querySelector( '.title-console__data' ) );
  32. editor.model.document.on( 'change:data', () => {
  33. titleConsole.update( titlePlugin.getTitle() );
  34. bodyConsole.update( titlePlugin.getBody() );
  35. dataConsole.update( editor.getData() );
  36. } );
  37. } )
  38. .catch( err => {
  39. console.error( err.stack );
  40. } );
  41. class Console {
  42. constructor( element ) {
  43. this.element = element;
  44. this.consoleUpdates = 0;
  45. this.previousData = '';
  46. }
  47. update( data ) {
  48. if ( this.previousData == data ) {
  49. return;
  50. }
  51. this.previousData = data;
  52. const element = this.element;
  53. this.consoleUpdates++;
  54. element.classList.add( 'updated' );
  55. element.textContent = `'${ data }'`;
  56. setTimeout( () => {
  57. if ( --this.consoleUpdates == 0 ) {
  58. element.classList.remove( 'updated' );
  59. }
  60. }, 500 );
  61. }
  62. }