8
0

imagetoolbar.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  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. toolbar.fillFromConfig( editor.config.get( 'toolbar' ), editor.ui.componentFactory );
  70. // Let the focusTracker know about new focusable UI element.
  71. editor.ui.focusTracker.add( panel.element );
  72. // Hide the panel when editor loses focus but no the other way around.
  73. panel.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
  74. if ( was && !is ) {
  75. panel.hide();
  76. }
  77. } );
  78. editingView.addObserver( ClickObserver );
  79. // Check if the toolbar should be displayed each time the user clicked in editable.
  80. editor.listenTo( editingView, 'click', () => {
  81. if ( editingView.selection.isFake ) {
  82. attachToolbar();
  83. // TODO: These 2 need interval–based event debouncing for performance
  84. // reasons. I guess even lodash offers such a helper.
  85. editor.ui.view.listenTo( window, 'scroll', attachToolbar );
  86. editor.ui.view.listenTo( window, 'resize', attachToolbar );
  87. } else {
  88. panel.hide();
  89. editor.ui.view.stopListening( window, 'scroll', attachToolbar );
  90. editor.ui.view.stopListening( window, 'resize', attachToolbar );
  91. }
  92. } );
  93. function attachToolbar() {
  94. panel.attachTo( {
  95. target: editingView.domConverter.viewRangeToDom( editingView.selection.getFirstRange() ),
  96. positions: [ positions.north, positions.south ]
  97. } );
  98. }
  99. } );
  100. }