imagetoolbar.js 3.8 KB

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