imagetoolbar.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/imagetoolbar
  7. */
  8. import Template from '@ckeditor/ckeditor5-ui/src/template';
  9. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  10. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  11. import { isImageWidget } from './image/utils';
  12. import ImageBalloonPanel from './image/ui/imageballoonpanelview';
  13. /**
  14. * Image toolbar class. Creates image toolbar placed inside balloon panel that is showed when image widget is selected.
  15. * Toolbar components are created using editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}
  16. * based on {@link module:core/editor/editor~Editor#config configuration} stored under `image.toolbar`.
  17. *
  18. * @extends module:core/plugin~Plugin
  19. */
  20. export default class ImageToolbar extends Plugin {
  21. /**
  22. * @inheritDoc
  23. */
  24. static get pluginName() {
  25. return 'ImageToolbar';
  26. }
  27. /**
  28. * @inheritDoc
  29. */
  30. constructor( editor ) {
  31. super( editor );
  32. /**
  33. * When set to `true`, toolbar will be repositioned and showed on each render event and focus change.
  34. * Set to `false` to temporary disable the image toolbar.
  35. *
  36. * @member {Boolean}
  37. */
  38. this.isEnabled = true;
  39. }
  40. /**
  41. * @inheritDoc
  42. */
  43. afterInit() {
  44. const editor = this.editor;
  45. const toolbarConfig = editor.config.get( 'image.toolbar' );
  46. // Don't add the toolbar if there is no configuration.
  47. if ( !toolbarConfig || !toolbarConfig.length ) {
  48. return;
  49. }
  50. const panel = this._panel = new ImageBalloonPanel( editor );
  51. const toolbar = new ToolbarView();
  52. // Add CSS class to the toolbar.
  53. Template.extend( toolbar.template, {
  54. attributes: {
  55. class: 'ck-editor-toolbar'
  56. }
  57. } );
  58. // Add CSS class to the panel.
  59. Template.extend( panel.template, {
  60. attributes: {
  61. class: [
  62. 'ck-toolbar-container',
  63. 'ck-editor-toolbar-container'
  64. ]
  65. }
  66. } );
  67. // Add toolbar to balloon panel.
  68. panel.content.add( toolbar );
  69. // Add buttons to the toolbar.
  70. toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory );
  71. // Add balloon panel to editor's UI.
  72. editor.ui.view.body.add( panel );
  73. // Show balloon panel each time image widget is selected.
  74. this.listenTo( this.editor.editing.view, 'render', () => {
  75. if ( this.isEnabled ) {
  76. this.show();
  77. }
  78. }, { priority: 'low' } );
  79. // There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
  80. this.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
  81. if ( !was && is && this.isEnabled ) {
  82. this.show();
  83. }
  84. } );
  85. }
  86. /**
  87. * Shows the toolbar.
  88. */
  89. show() {
  90. const selectedElement = this.editor.editing.view.selection.getSelectedElement();
  91. if ( selectedElement && isImageWidget( selectedElement ) ) {
  92. this._panel.attach();
  93. }
  94. }
  95. /**
  96. * Hides the toolbar.
  97. */
  98. hide() {
  99. this._panel.detach();
  100. }
  101. }