imagestyleengine.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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/imagestyleengine
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ImageStyleCommand from './imagestylecommand';
  10. import ImageEngine from '../imageengine';
  11. import { viewToModelStyleAttribute, modelToViewStyleAttribute } from './converters';
  12. import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
  13. import sideIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
  14. /**
  15. * The image style engine plugin. Sets default configuration, creates converters and registers
  16. * {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand ImageStyleCommand}.
  17. *
  18. * @extends {module:core/plugin~Plugin}
  19. */
  20. export default class ImageStyleEngine extends Plugin {
  21. /**
  22. * @inheritDoc
  23. */
  24. static get requires() {
  25. return [ ImageEngine ];
  26. }
  27. /**
  28. * @inheritDoc
  29. */
  30. init() {
  31. const editor = this.editor;
  32. const t = editor.t;
  33. const doc = editor.document;
  34. const schema = doc.schema;
  35. const data = editor.data;
  36. const editing = editor.editing;
  37. // Define default configuration.
  38. editor.config.define( 'image.styles', [
  39. // This option is equal to situation when no style is applied.
  40. { name: 'imageStyleFull', title: t( 'Full size image' ), icon: fullSizeIcon, value: null },
  41. // This represents side image.
  42. { name: 'imageStyleSide', title: t( 'Side image' ), icon: sideIcon, value: 'side', className: 'image-style-side' }
  43. ] );
  44. // Get configuration.
  45. const styles = editor.config.get( 'image.styles' );
  46. // Allow imageStyle attribute in image.
  47. // We could call it 'style' but https://github.com/ckeditor/ckeditor5-engine/issues/559.
  48. schema.allow( { name: 'image', attributes: 'imageStyle', inside: '$root' } );
  49. // Converters for imageStyle attribute from model to view.
  50. const modelToViewConverter = modelToViewStyleAttribute( styles );
  51. editing.modelToView.on( 'addAttribute:imageStyle:image', modelToViewConverter );
  52. data.modelToView.on( 'addAttribute:imageStyle:image', modelToViewConverter );
  53. editing.modelToView.on( 'changeAttribute:imageStyle:image', modelToViewConverter );
  54. data.modelToView.on( 'changeAttribute:imageStyle:image', modelToViewConverter );
  55. editing.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewConverter );
  56. data.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewConverter );
  57. // Converter for figure element from view to model.
  58. data.viewToModel.on( 'element:figure', viewToModelStyleAttribute( styles ), { priority: 'low' } );
  59. // Register separate command for each style.
  60. for ( let style of styles ) {
  61. editor.commands.set( style.name, new ImageStyleCommand( editor, style ) );
  62. }
  63. }
  64. }
  65. /**
  66. * Image style format descriptor.
  67. *
  68. * import fullIcon from 'path/to/icon.svg`;
  69. *
  70. * const imageStyleFormat = {
  71. * name: 'fullSizeImage',
  72. * value: 'full',
  73. * icon: fullIcon,
  74. * title: `Full size image`,
  75. * class: `image-full-size`
  76. * }
  77. *
  78. * @typedef {Object} module:image/imagestyle/imagestyleengine~ImageStyleFormat
  79. * @property {String} name Name of the style. It will be used to:
  80. * * register {@link module:core/command/command~Command command} which will apply this style,
  81. * * store style's button in editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
  82. * @property {String} value Value used to store this style in model attribute.
  83. * When value is `null` style will be used as default one. Default style does not apply any CSS class to the view element.
  84. * @property {String} icon SVG icon representation to use when creating style's button.
  85. * @property {String} title Style's title.
  86. * @property {String} className CSS class used to represent style in view.
  87. */