imagestyle.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  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 ImageStyleEditing from './imagestyle/imagestyleediting';
  10. import ImageStyleUI from './imagestyle/imagestyleui';
  11. /**
  12. * The image style plugin.
  13. *
  14. * It loads the {@link module:image/imagestyle/imagestyleediting~ImageStyleEditing}
  15. * and {@link module:image/imagestyle/imagestyleui~ImageStyleUI} plugins.
  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 [ ImageStyleEditing, ImageStyleUI ];
  25. }
  26. /**
  27. * @inheritDoc
  28. */
  29. static get pluginName() {
  30. return 'ImageStyle';
  31. }
  32. }
  33. /**
  34. * Available image styles.
  35. *
  36. * The default value is:
  37. *
  38. * const imageConfig = {
  39. * styles: [ 'full', 'side' ]
  40. * };
  41. *
  42. * which configures two default styles:
  43. *
  44. * * the "full" style which doesn't apply any class, e.g. for images styled to span 100% width of the content,
  45. * * the "side" style with the `.image-style-side` CSS class.
  46. *
  47. * See {@link module:image/imagestyle/utils~defaultStyles} to learn more about default
  48. * styles provided by the image feature.
  49. *
  50. * The {@link module:image/imagestyle/utils~defaultStyles default styles} can be customized,
  51. * e.g. to change the icon, title or CSS class of the style. The feature also provides several
  52. * {@link module:image/imagestyle/utils~defaultIcons default icons} to chose from.
  53. *
  54. * import customIcon from 'custom-icon.svg';
  55. *
  56. * // ...
  57. *
  58. * const imageConfig = {
  59. * styles: [
  60. * // This will only customize the icon of the "full" style.
  61. * // Note: 'right' is one of default icons provided by the feature.
  62. * { name: 'full', icon: 'right' },
  63. *
  64. * // This will customize the icon, title and CSS class of the default "side" style.
  65. * { name: 'side', icon: customIcon, title: 'My side style', class: 'custom-side-image' }
  66. * ]
  67. * };
  68. *
  69. * If none of the default styles is good enough, it is possible to define independent custom styles too:
  70. *
  71. * import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
  72. * import sideIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
  73. *
  74. * // ...
  75. *
  76. * const imageConfig = {
  77. * styles: [
  78. * // A completely custom full size style with no class, used as a default.
  79. * { name: 'fullSize', title: 'Full size', icon: fullSizeIcon, isDefault: true },
  80. *
  81. * { name: 'side', title: 'To the side', icon: sideIcon, className: 'side-image' }
  82. * ]
  83. * };
  84. *
  85. * Note: Setting `title` to one of {@link module:image/imagestyle/imagestyleui~ImageStyleUI#localizedDefaultStylesTitles}
  86. * will automatically translate it to the language of the editor.
  87. *
  88. * Read more about styling images in the {@glink features/image#image-styles Image styles guide}.
  89. *
  90. * The feature creates commands based on defined styles, so you can change the style of a selected image by executing
  91. * the following command:
  92. *
  93. * editor.execute( 'imageStyle' { value: 'side' } );
  94. *
  95. * The feature creates also buttons which execute the command. So, assuming that you use the
  96. * default image styles setting, you can {@link module:image/image~ImageConfig#toolbar configure the image toolbar}
  97. * (or any other toolbar) to contain these options:
  98. *
  99. * const imageConfig = {
  100. * toolbar: [ 'imageStyle:full', 'imageStyle:side' ]
  101. * };
  102. *
  103. * @member {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>} module:image/image~ImageConfig#styles
  104. */