8
0

indent-block.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /**
  2. * @license Copyright (c) 2003-2019, 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 ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  7. import MultiCommand from '@ckeditor/ckeditor5-core/src/multicommand';
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  10. import IndentBlock from '../../src/indentblock';
  11. import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
  12. import IndentBlockCommand from '../../src/indentblockcommand';
  13. class IndentUI extends Plugin {
  14. init() {
  15. const editor = this.editor;
  16. const t = editor.t;
  17. this._createButton( 'indent', t( 'Indent' ) );
  18. // this._createButton( 'outdent', t( 'Outdent' ) );
  19. this._createButton( 'indentList', t( 'Indent List' ) );
  20. // this._createButton( 'outdentList', t( 'Outdent List' ) );
  21. this._createButton( 'indentBlock', t( 'Indent Block' ) );
  22. // this._createButton( 'outdentBlock', t( 'Outdent Block' ) );
  23. }
  24. _createButton( commandName, label ) {
  25. const editor = this.editor;
  26. editor.ui.componentFactory.add( commandName, locale => {
  27. const command = editor.commands.get( commandName );
  28. const view = new ButtonView( locale );
  29. view.set( {
  30. label,
  31. withText: true,
  32. tooltip: true
  33. } );
  34. view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
  35. // Execute command.
  36. this.listenTo( view, 'execute', () => editor.execute( commandName ) );
  37. return view;
  38. } );
  39. }
  40. afterInit() {
  41. const editor = this.editor;
  42. editor.commands.add( 'indentBlock', new IndentBlockCommand( editor ) );
  43. const indentCommand = new MultiCommand( editor );
  44. indentCommand.registerChildCommand( editor.commands.get( 'indentList' ) );
  45. indentCommand.registerChildCommand( editor.commands.get( 'indentBlock' ) );
  46. editor.commands.add( 'indent', indentCommand );
  47. // TODO nicer API?
  48. // editor.commands.add( 'indentList', new Command(), 'indent' );
  49. // editor.commands.addMulti( 'indentList', new Command(), 'indent' );
  50. // editor.commands.addMulti( 'indentList', 'indent' );
  51. const outdentCommand = new MultiCommand( editor );
  52. outdentCommand.registerChildCommand( editor.commands.get( 'outdentList' ) );
  53. editor.commands.add( 'outdent', outdentCommand );
  54. }
  55. }
  56. ClassicEditor
  57. .create( document.querySelector( '#editor' ), {
  58. plugins: [ ArticlePluginSet, IndentUI, IndentBlock ],
  59. toolbar: [
  60. 'heading',
  61. // '|',
  62. // 'bold',
  63. // 'italic',
  64. // 'link',
  65. '|',
  66. 'indent',
  67. 'outdent',
  68. '|',
  69. 'indentList',
  70. 'outdentList',
  71. '|',
  72. 'indentBlock',
  73. 'outdentBlock',
  74. '|',
  75. 'bulletedList',
  76. 'numberedList',
  77. '|',
  78. // 'blockQuote',
  79. // 'insertTable',
  80. // 'mediaEmbed',
  81. 'undo',
  82. 'redo'
  83. ],
  84. image: {
  85. toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  86. },
  87. table: {
  88. contentToolbar: [
  89. 'tableColumn',
  90. 'tableRow',
  91. 'mergeTableCells'
  92. ]
  93. }
  94. } )
  95. .then( editor => {
  96. window.editor = editor;
  97. } )
  98. .catch( err => {
  99. console.error( err.stack );
  100. } );