tableui.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module table/tableui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  10. import icon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
  11. import insertRowIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
  12. import insertColumnIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
  13. /**
  14. * The table UI plugin.
  15. *
  16. * @extends module:core/plugin~Plugin
  17. */
  18. export default class TableUI extends Plugin {
  19. /**
  20. * @inheritDoc
  21. */
  22. init() {
  23. const editor = this.editor;
  24. editor.ui.componentFactory.add( 'insertTable', locale => {
  25. const command = editor.commands.get( 'insertTable' );
  26. const buttonView = new ButtonView( locale );
  27. buttonView.bind( 'isEnabled' ).to( command );
  28. buttonView.set( {
  29. icon,
  30. label: 'Insert table',
  31. tooltip: true
  32. } );
  33. buttonView.on( 'execute', () => {
  34. editor.execute( 'insertTable' );
  35. editor.editing.view.focus();
  36. } );
  37. return buttonView;
  38. } );
  39. editor.ui.componentFactory.add( 'insertRow', locale => {
  40. const command = editor.commands.get( 'insertRow' );
  41. const buttonView = new ButtonView( locale );
  42. buttonView.bind( 'isEnabled' ).to( command );
  43. buttonView.set( {
  44. icon: insertRowIcon,
  45. label: 'Insert row',
  46. tooltip: true
  47. } );
  48. buttonView.on( 'execute', () => {
  49. editor.execute( 'insertRow' );
  50. editor.editing.view.focus();
  51. } );
  52. return buttonView;
  53. } );
  54. editor.ui.componentFactory.add( 'insertColumn', locale => {
  55. const command = editor.commands.get( 'insertColumn' );
  56. const buttonView = new ButtonView( locale );
  57. buttonView.bind( 'isEnabled' ).to( command );
  58. buttonView.set( {
  59. icon: insertColumnIcon,
  60. label: 'Insert column',
  61. tooltip: true
  62. } );
  63. buttonView.on( 'execute', () => {
  64. editor.execute( 'insertColumn' );
  65. editor.editing.view.focus();
  66. } );
  67. return buttonView;
  68. } );
  69. }
  70. }