imagetoolbar.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals window, document, console:false */
  6. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
  7. import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
  8. import Enter from '@ckeditor/ckeditor5-enter/src/enter';
  9. import Typing from '@ckeditor/ckeditor5-typing/src/typing';
  10. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  11. import Undo from '@ckeditor/ckeditor5-undo/src/undo';
  12. import Image from '@ckeditor/ckeditor5-image/src/image';
  13. import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  14. import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  15. import Template from '../../../src/template';
  16. import ToolbarView from '../../../src/toolbar/toolbarview';
  17. import BalloonPanelView from '../../../src/balloonpanel/balloonpanelview';
  18. const arrowVOffset = BalloonPanelView.arrowVerticalOffset;
  19. const positions = {
  20. // [text range]
  21. // ^
  22. // +-----------------+
  23. // | Balloon |
  24. // +-----------------+
  25. south: ( targetRect, balloonRect ) => ( {
  26. top: targetRect.bottom + arrowVOffset,
  27. left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
  28. name: 's'
  29. } ),
  30. // +-----------------+
  31. // | Balloon |
  32. // +-----------------+
  33. // V
  34. // [text range]
  35. north: ( targetRect, balloonRect ) => ( {
  36. top: targetRect.top - balloonRect.height - arrowVOffset,
  37. left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
  38. name: 'n'
  39. } )
  40. };
  41. ClassicEditor.create( document.querySelector( '#editor' ), {
  42. plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Image ],
  43. toolbar: [ 'bold', 'italic', 'undo', 'redo' ]
  44. } )
  45. .then( editor => {
  46. createImageToolbar( editor );
  47. window.editor = editor;
  48. } )
  49. .catch( err => {
  50. console.error( err.stack );
  51. } );
  52. function createImageToolbar( editor ) {
  53. // Create a plain toolbar instance.
  54. const toolbar = new ToolbarView();
  55. // Create a BalloonPanelView instance.
  56. const panel = new BalloonPanelView( editor.locale );
  57. Template.extend( panel.template, {
  58. attributes: {
  59. class: [
  60. 'ck-toolbar__container',
  61. ]
  62. }
  63. } );
  64. // Putting the toolbar inside of the balloon panel.
  65. panel.content.add( toolbar );
  66. editor.ui.view.body.add( panel ).then( () => {
  67. const editingView = editor.editing.view;
  68. // Fill the toolbar with some buttons. Simply copy default editor toolbar.
  69. for ( let name of editor.config.get( 'toolbar' ) ) {
  70. toolbar.items.add( editor.ui.componentFactory.create( name ) );
  71. }
  72. // Let the focusTracker know about new focusable UI element.
  73. editor.ui.focusTracker.add( panel.element );
  74. // Hide the panel when editor loses focus but no the other way around.
  75. panel.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
  76. if ( was && !is ) {
  77. panel.hide();
  78. }
  79. } );
  80. editingView.addObserver( ClickObserver );
  81. // Check if the toolbar should be displayed each time the user clicked in editable.
  82. editor.listenTo( editingView, 'click', () => {
  83. if ( editingView.selection.isFake ) {
  84. attachToolbar();
  85. // TODO: These 2 need interval–based event debouncing for performance
  86. // reasons. I guess even lodash offers such a helper.
  87. editor.ui.view.listenTo( window, 'scroll', attachToolbar );
  88. editor.ui.view.listenTo( window, 'resize', attachToolbar );
  89. } else {
  90. panel.hide();
  91. editor.ui.view.stopListening( window, 'scroll', attachToolbar );
  92. editor.ui.view.stopListening( window, 'resize', attachToolbar );
  93. }
  94. } );
  95. function attachToolbar() {
  96. panel.attachTo( {
  97. target: editingView.domConverter.viewRangeToDom( editingView.selection.getFirstRange() ),
  98. positions: [ positions.north, positions.south ]
  99. } );
  100. }
  101. } );
  102. }