imagestyle.js 4.6 KB

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