imagestyle.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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 {@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 'image/imagestyle';
  30. }
  31. /**
  32. * @inheritDoc
  33. */
  34. init() {
  35. const styles = this.editor.config.get( 'image.styles' );
  36. for ( let style of styles ) {
  37. this._createButton( style );
  38. }
  39. // Push buttons to default image toolbar if one exists.
  40. const defaultImageToolbarConfig = this.editor.config.get( 'image.defaultToolbar' );
  41. if ( defaultImageToolbarConfig ) {
  42. if ( defaultImageToolbarConfig.length ) {
  43. defaultImageToolbarConfig.push( '|' );
  44. }
  45. styles.forEach( style => defaultImageToolbarConfig.push( style.name ) );
  46. }
  47. }
  48. /**
  49. * Creates button for each style and stores it in editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
  50. *
  51. * @private
  52. * @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} style
  53. */
  54. _createButton( style ) {
  55. const editor = this.editor;
  56. const command = editor.commands.get( style.name );
  57. editor.ui.componentFactory.add( style.name, ( locale ) => {
  58. const view = new ButtonView( locale );
  59. view.set( {
  60. label: style.title,
  61. icon: style.icon,
  62. tooltip: true
  63. } );
  64. view.bind( 'isEnabled' ).to( command, 'isEnabled' );
  65. view.bind( 'isOn' ).to( command, 'value' );
  66. this.listenTo( view, 'execute', () => editor.execute( style.name ) );
  67. return view;
  68. } );
  69. }
  70. }