balloontoolbar.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals console:false, document, window */
  6. import BalloonToolbarEditor from '../../src/balloontoolbar';
  7. import ArticlePreset from '@ckeditor/ckeditor5-presets/src/article';
  8. import testUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
  9. window.editors = {};
  10. window.editables = [];
  11. window._observers = [];
  12. function initEditors() {
  13. init( '#editor-1' );
  14. init( '#editor-2' );
  15. function init( selector ) {
  16. BalloonToolbarEditor.create( document.querySelector( selector ), {
  17. plugins: [ ArticlePreset ],
  18. toolbar: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
  19. image: {
  20. toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
  21. }
  22. } )
  23. .then( editor => {
  24. console.log( `${ selector } has been initialized`, editor );
  25. console.log( 'It has been added to global `editors` and `editables`.' );
  26. window.editors[ selector ] = editor;
  27. window.editables.push( editor.editing.view.getRoot() );
  28. const observer = testUtils.createObserver();
  29. observer.observe(
  30. `${ selector }.ui.focusTracker`,
  31. editor.ui.focusTracker,
  32. [ 'isFocused' ]
  33. );
  34. window._observers.push( observer );
  35. } )
  36. .catch( err => {
  37. console.error( err.stack );
  38. } );
  39. }
  40. }
  41. function destroyEditors() {
  42. for ( const selector in window.editors ) {
  43. window.editors[ selector ].destroy().then( () => {
  44. console.log( `${ selector } was destroyed.` );
  45. } );
  46. }
  47. for ( const observer of window._observers ) {
  48. observer.stopListening();
  49. }
  50. window.editors = {};
  51. window.editables.length = window._observers.length = 0;
  52. }
  53. document.getElementById( 'initEditors' ).addEventListener( 'click', initEditors );
  54. document.getElementById( 'destroyEditors' ).addEventListener( 'click', destroyEditors );