8
0

tabletoolbar.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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 table/tabletoolbar
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import { getSelectedTableWidget, getTableWidgetAncestor } from './utils';
  10. import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
  11. /**
  12. * The table toolbar class. It creates toolbars for the table feature and its content (for now only for a table cell content).
  13. *
  14. * Table toolbar shows up when a table widget is selected. Its components (e.g. buttons) are created based on the
  15. * {@link module:table/table~TableConfig#tableToolbar `table.tableToolbar` configuration option}.
  16. *
  17. * Table content toolbar shows up when the selection is inside the content of a table. It creates its component based on the
  18. * {@link module:table/table~TableConfig#contentToolbar `table.contentToolbar` configuration option}.
  19. *
  20. * @extends module:core/plugin~Plugin
  21. */
  22. export default class TableToolbar extends Plugin {
  23. /**
  24. * @inheritDoc
  25. */
  26. static get requires() {
  27. return [ WidgetToolbarRepository ];
  28. }
  29. /**
  30. * @inheritDoc
  31. */
  32. static get pluginName() {
  33. return 'TableToolbar';
  34. }
  35. /**
  36. * @inheritDoc
  37. */
  38. afterInit() {
  39. const editor = this.editor;
  40. const t = editor.t;
  41. const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
  42. const tableContentToolbarItems = editor.config.get( 'table.contentToolbar' );
  43. const tableToolbarItems = editor.config.get( 'table.tableToolbar' );
  44. if ( tableContentToolbarItems ) {
  45. widgetToolbarRepository.register( 'tableContent', {
  46. ariaLabel: t( 'Table toolbar' ),
  47. items: tableContentToolbarItems,
  48. getRelatedElement: getTableWidgetAncestor
  49. } );
  50. }
  51. if ( tableToolbarItems ) {
  52. widgetToolbarRepository.register( 'table', {
  53. ariaLabel: t( 'Table toolbar' ),
  54. items: tableToolbarItems,
  55. getRelatedElement: getSelectedTableWidget
  56. } );
  57. }
  58. }
  59. }
  60. /**
  61. * Items to be placed in the table content toolbar.
  62. * The {@link module:table/tabletoolbar~TableToolbar} plugin is required to make this toolbar working.
  63. *
  64. * Assuming that you use the {@link module:table/tableui~TableUI} feature, the following toolbar items will be available
  65. * in {@link module:ui/componentfactory~ComponentFactory}:
  66. *
  67. * * `'tableRow'`,
  68. * * `'tableColumn'`,
  69. * * `'mergeTableCells'`.
  70. *
  71. * You can thus configure the toolbar like this:
  72. *
  73. * const tableConfig = {
  74. * contentToolbar: [ 'tableRow', 'tableColumn', 'mergeTableCells' ]
  75. * };
  76. *
  77. * Of course, the same buttons can also be used in the
  78. * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
  79. *
  80. * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  81. *
  82. * @member {Array.<String>} module:table/table~TableConfig#contentToolbar
  83. */
  84. /**
  85. * Items to be placed in the table toolbar.
  86. * The {@link module:table/tabletoolbar~TableToolbar} plugin is required to make this toolbar working.
  87. *
  88. * You can thus configure the toolbar like this:
  89. *
  90. * const tableConfig = {
  91. * tableToolbar: [ 'blockQuote' ]
  92. * };
  93. *
  94. * Of course, the same buttons can also be used in the
  95. * {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
  96. *
  97. * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
  98. *
  99. * @member {Array.<String>} module:table/table~TableConfig#tableToolbar
  100. */