inline.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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 InlineEditor from '../../src/inline';
  7. import Enter from '@ckeditor/ckeditor5-enter/src/enter';
  8. import Typing from '@ckeditor/ckeditor5-typing/src/typing';
  9. import Heading from '@ckeditor/ckeditor5-heading/src/heading';
  10. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  11. import Undo from '@ckeditor/ckeditor5-undo/src/undo';
  12. import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  13. import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  14. import Link from '@ckeditor/ckeditor5-link/src/link';
  15. import testUtils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
  16. window.editors = {};
  17. window.editables = [];
  18. window._observers = [];
  19. function initEditors() {
  20. init( '#editor-1' );
  21. init( '#editor-2' );
  22. function init( selector ) {
  23. InlineEditor.create( document.querySelector( selector ), {
  24. plugins: [ Link, Enter, Typing, Paragraph, Undo, Heading, Bold, Italic ],
  25. toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo', 'link', 'unlink' ]
  26. } )
  27. .then( editor => {
  28. console.log( `${ selector } has been initialized`, editor );
  29. console.log( 'It has been added to global `editors` and `editables`.' );
  30. window.editors[ selector ] = editor;
  31. window.editables.push( editor.editing.view.getRoot() );
  32. let observer = testUtils.createObserver();
  33. observer.observe(
  34. `${ selector }.ui.focusTracker`,
  35. editor.ui.focusTracker,
  36. [ 'isFocused' ]
  37. );
  38. window._observers.push( observer );
  39. } )
  40. .catch( err => {
  41. console.error( err.stack );
  42. } );
  43. }
  44. }
  45. function destroyEditors() {
  46. for ( let selector in window.editors ) {
  47. window.editors[ selector ].destroy().then( () => {
  48. console.log( `${ selector } was destroyed.` );
  49. } );
  50. }
  51. for ( let observer of window._observers ) {
  52. observer.stopListening();
  53. }
  54. window.editors = {};
  55. window.editables.length = window._observers.length = 0;
  56. }
  57. document.getElementById( 'initEditors' ).addEventListener( 'click', initEditors );
  58. document.getElementById( 'destroyEditors' ).addEventListener( 'click', destroyEditors );