imagetoolbar.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/imagetoolbar
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import { isImageWidgetSelected } 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 widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
  43. widgetToolbarRepository.register( 'image', {
  44. toolbarItems: editor.config.get( 'image.toolbar' ) || [],
  45. visibleWhen: isImageWidgetSelected,
  46. } );
  47. }
  48. }
  49. /**
  50. * Items to be placed in the image toolbar.
  51. * This option is used by the {@link module:image/imagetoolbar~ImageToolbar} feature.
  52. *
  53. * Assuming that you use the following features:
  54. *
  55. * * {@link module:image/imagestyle~ImageStyle} (with a default configuration),
  56. * * {@link module:image/imagetextalternative~ImageTextAlternative},
  57. *
  58. * three toolbar items will be available in {@link module:ui/componentfactory~ComponentFactory}:
  59. * `'imageStyle:full'`, `'imageStyle:side'`, and `'imageTextAlternative'` so you can configure the toolbar like this:
  60. *
  61. * const imageConfig = {
  62. * toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  63. * };
  64. *
  65. * Of course, the same buttons can also be used in the
  66. * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
  67. *
  68. * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  69. *
  70. * @member {Array.<String>} module:image/image~ImageConfig#toolbar
  71. */