paragraphbuttonui.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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. /**
  6. * @module paragraph/paragraphbuttonui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  10. import icon from '../theme/icons/paragraph.svg';
  11. /**
  12. * This plugin defines the `'paragraphs'` button. It can be used together with
  13. * {@link module:heading/headingbuttonsui~HeadingButtonsUI} to replace the standard heading dropdown.
  14. *
  15. * This plugin is not loaded automatically by the {@link module:paragraph/paragraph~Paragraph} plugin. It must
  16. * be added manually.
  17. *
  18. * ClassicEditor
  19. * .create( {
  20. * plugins: [ ..., Heading, Paragraph, HeadingButtonsUI, ParagraphButtonUI ]
  21. * toolbar: [ 'paragraph', 'heading1', 'heading2', 'heading3' ]
  22. * } )
  23. * .then( ... )
  24. * .catch( ... );
  25. *
  26. * @extends module:core/plugin~Plugin
  27. */
  28. export default class ParagraphButtonUI extends Plugin {
  29. init() {
  30. const editor = this.editor;
  31. const t = editor.t;
  32. editor.ui.componentFactory.add( 'paragraph', locale => {
  33. const view = new ButtonView( locale );
  34. const command = editor.commands.get( 'paragraph' );
  35. view.label = t( 'Paragraph' );
  36. view.icon = icon;
  37. view.tooltip = true;
  38. view.isToggleable = true;
  39. view.bind( 'isEnabled' ).to( command );
  40. view.bind( 'isOn' ).to( command, 'value' );
  41. view.on( 'execute', () => {
  42. editor.execute( 'paragraph' );
  43. } );
  44. return view;
  45. } );
  46. }
  47. }