inline-editor.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* globals console, window, document */
  6. import InlineEditor from '@ckeditor/ckeditor5-build-inline/src/ckeditor';
  7. import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
  8. import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
  9. const inlineInjectElements = document.querySelectorAll( '#snippet-inline-editor [data-inline-inject]' );
  10. Array.from( inlineInjectElements ).forEach( inlineElement => {
  11. const config = {
  12. toolbar: {
  13. viewportTopOffset: window.getViewportTopOffsetConfig()
  14. },
  15. cloudServices: CS_CONFIG
  16. };
  17. if ( inlineElement.tagName.toLowerCase() == 'header' ) {
  18. config.removePlugins = [
  19. 'Blockquote',
  20. 'Image',
  21. 'ImageCaption',
  22. 'ImageStyle',
  23. 'ImageToolbar',
  24. 'ImageUpload',
  25. 'List',
  26. 'EasyImage',
  27. 'CKFinder',
  28. 'CKFinderUploadAdapter'
  29. ];
  30. config.toolbar.items = [ 'heading', '|', 'bold', 'italic', 'link' ];
  31. } else {
  32. config.extraPlugins = [ ImageResize ];
  33. config.image = {
  34. resizeOptions: [
  35. {
  36. name: 'imageResize:original',
  37. label: 'Original',
  38. value: null
  39. },
  40. {
  41. name: 'imageResize:50',
  42. label: '50%',
  43. value: '50'
  44. },
  45. {
  46. name: 'imageResize:75',
  47. label: '75%',
  48. value: '75'
  49. }
  50. ],
  51. styles: [ 'full', 'alignLeft', 'alignRight' ],
  52. toolbar: [
  53. 'imageStyle:alignLeft',
  54. 'imageStyle:full',
  55. 'imageStyle:alignRight',
  56. '|',
  57. 'imageResize',
  58. '|',
  59. 'imageTextAlternative'
  60. ]
  61. };
  62. }
  63. InlineEditor
  64. .create( inlineElement, config )
  65. .then( editor => {
  66. window.editor = editor;
  67. } )
  68. .catch( err => {
  69. console.error( err );
  70. } );
  71. } );