imagetoolbar.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module image/imagetoolbar
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import { getSelectedImageWidget } from './image/utils';
  10. import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
  11. /**
  12. * The image toolbar plugin. It creates and manages the image toolbar (the toolbar displayed when an image is selected).
  13. *
  14. * For a detailed overview, check the {@glink features/image#image-contextual-toolbar image contextual toolbar} documentation.
  15. *
  16. * Instances of toolbar components (e.g. buttons) are created using the editor's
  17. * {@link module:ui/componentfactory~ComponentFactory component factory}
  18. * based on the {@link module:image/image~ImageConfig#toolbar `image.toolbar` configuration option}.
  19. *
  20. * The toolbar uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
  21. *
  22. * @extends module:core/plugin~Plugin
  23. */
  24. export default class ImageToolbar extends Plugin {
  25. /**
  26. * @inheritDoc
  27. */
  28. static get requires() {
  29. return [ WidgetToolbarRepository ];
  30. }
  31. /**
  32. * @inheritDoc
  33. */
  34. static get pluginName() {
  35. return 'ImageToolbar';
  36. }
  37. /**
  38. * @inheritDoc
  39. */
  40. afterInit() {
  41. const editor = this.editor;
  42. const t = editor.t;
  43. const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
  44. widgetToolbarRepository.register( 'image', {
  45. ariaLabel: t( 'Image toolbar' ),
  46. items: editor.config.get( 'image.toolbar' ) || [],
  47. getRelatedElement: getSelectedImageWidget
  48. } );
  49. }
  50. }
  51. /**
  52. * Items to be placed in the image toolbar.
  53. * This option is used by the {@link module:image/imagetoolbar~ImageToolbar} feature.
  54. *
  55. * Assuming that you use the following features:
  56. *
  57. * * {@link module:image/imagestyle~ImageStyle} (with a default configuration),
  58. * * {@link module:image/imagetextalternative~ImageTextAlternative},
  59. *
  60. * three toolbar items will be available in {@link module:ui/componentfactory~ComponentFactory}:
  61. * `'imageStyle:full'`, `'imageStyle:side'`, and `'imageTextAlternative'` so you can configure the toolbar like this:
  62. *
  63. * const imageConfig = {
  64. * toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  65. * };
  66. *
  67. * Of course, the same buttons can also be used in the
  68. * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
  69. *
  70. * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  71. *
  72. * @member {Array.<String>} module:image/image~ImageConfig#toolbar
  73. */