image-style-custom.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals ClassicEditor, console, window, document */
  6. import './image-style-custom.scss';
  7. import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
  8. import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
  9. import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
  10. ClassicEditor
  11. .create( document.querySelector( '#snippet-image-style-custom' ), {
  12. image: {
  13. styles: [
  14. // This option is equal to a situation where no style is applied.
  15. {
  16. name: 'imageStyleFull',
  17. title: 'Full size image',
  18. icon: fullSizeIcon,
  19. value: null
  20. },
  21. // This represents an image aligned to left.
  22. {
  23. name: 'imageStyleLeft',
  24. title: 'Left aligned image',
  25. icon: alignLeftIcon,
  26. value: 'left',
  27. className: 'image-style-left'
  28. },
  29. // This represents an image aligned to right.
  30. {
  31. name: 'imageStyleRight',
  32. title: 'Right aligned image',
  33. icon: alignRightIcon,
  34. value: 'right',
  35. className: 'image-style-right'
  36. }
  37. ],
  38. toolbar: [ 'imageTextAlternative', '|', 'imageStyleLeft', 'imageStyleFull', 'imageStyleRight' ]
  39. }
  40. } )
  41. .then( editor => {
  42. window.editorStyleCustom = editor;
  43. } )
  44. .catch( err => {
  45. console.error( err.stack );
  46. } );