imagestyle.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/imagestyle
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ImageStyleEngine from './imagestyle/imagestyleengine';
  10. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  11. /**
  12. * The image style plugin.
  13. *
  14. * Uses the {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine}.
  15. *
  16. * @extends module:core/plugin~Plugin
  17. */
  18. export default class ImageStyle extends Plugin {
  19. /**
  20. * @inheritDoc
  21. */
  22. static get requires() {
  23. return [ ImageStyleEngine ];
  24. }
  25. /**
  26. * @inheritDoc
  27. */
  28. static get pluginName() {
  29. return 'ImageStyle';
  30. }
  31. /**
  32. * @inheritDoc
  33. */
  34. init() {
  35. const editor = this.editor;
  36. const styles = editor.plugins.get( ImageStyleEngine ).imageStyles;
  37. for ( const style of styles ) {
  38. this._createButton( style );
  39. }
  40. }
  41. /**
  42. * Creates a button for each style and stores it in the editor {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
  43. *
  44. * @private
  45. * @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} style
  46. */
  47. _createButton( style ) {
  48. const editor = this.editor;
  49. const command = editor.commands.get( style.name );
  50. editor.ui.componentFactory.add( style.name, locale => {
  51. const view = new ButtonView( locale );
  52. view.set( {
  53. label: style.title,
  54. icon: style.icon,
  55. tooltip: true
  56. } );
  57. view.bind( 'isEnabled' ).to( command, 'isEnabled' );
  58. view.bind( 'isOn' ).to( command, 'value' );
  59. this.listenTo( view, 'execute', () => editor.execute( style.name ) );
  60. return view;
  61. } );
  62. }
  63. }
  64. /**
  65. * Available image styles.
  66. * The option is used by the {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine} feature.
  67. *
  68. * The default value is:
  69. *
  70. * const imageConfig = {
  71. * styles: [ 'imageStyleFull', 'imageStyleSide' ]
  72. * };
  73. *
  74. * which configures two default styles:
  75. *
  76. * * the "full" style which doesn't apply any class, e.g. for images styled to span 100% width of the content,
  77. * * the "side" style with the `.image-style-side` CSS class.
  78. *
  79. * See {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine.defaultStyles} to learn more about default
  80. * styles provided by the image feature.
  81. *
  82. * The {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine.defaultStyles default styles} can be customized,
  83. * e.g. to change the icon, title or CSS class of the style. The feature also provides several
  84. * {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine.defaultIcons default icons} to chose from.
  85. *
  86. * import customIcon from 'custom-icon.svg';
  87. *
  88. * // ...
  89. *
  90. * const imageConfig = {
  91. * styles: [
  92. * // This will only customize the icon of the "full" style.
  93. * // Note: 'right' is one of default icons provided by the feature.
  94. * { name: 'imageStyleFull', icon: 'right' },
  95. *
  96. * // This will customize the icon, title and CSS class of the default "side" style.
  97. * { name: 'imageStyleSide', icon: customIcon, title: 'My side style', class: 'custom-side-image' }
  98. * ]
  99. * };
  100. *
  101. * If none of the default styles is good enough, it is possible to define independent custom styles too:
  102. *
  103. * import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
  104. * import sideIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
  105. *
  106. * // ...
  107. *
  108. * const imageConfig = {
  109. * styles: [
  110. * // A completely custom full size style with no class, used as a default.
  111. * { name: 'fullSize', title: 'Full size', icon: fullSizeIcon, isDefault: true },
  112. *
  113. * { name: 'side', title: 'To the side', icon: sideIcon, className: 'side-image' }
  114. * ]
  115. * };
  116. *
  117. * Note: Setting `title` to one of {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine#localizedDefaultStylesTitles}
  118. * will automatically translate it to the language of the editor.
  119. *
  120. * Read more about styling images in the {@glink features/image#Image-styles Image styles guide}.
  121. *
  122. * The feature creates commands based on defined styles, so you can change the style of a selected image by executing
  123. * the following command:
  124. *
  125. * editor.execute( 'imageStyleSide' );
  126. *
  127. * The features creates also buttons which execute the commands, so assuming that you use the
  128. * default image styles setting you can {@link module:image/image~ImageConfig#toolbar configure the image toolbar}
  129. * to contain these options:
  130. *
  131. * const imageConfig = {
  132. * toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
  133. * };
  134. *
  135. * @member {Array.<module:image/imagestyle/imagestyleengine~ImageStyleFormat>} module:image/image~ImageConfig#styles
  136. */