article.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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 ArticlePluginSet from '../_utils/articlepluginset';
  8. import MultiCommand from '../../src/multicommand';
  9. import Plugin from '../../src/plugin';
  10. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  11. class IndentOutdent extends Plugin {
  12. init() {
  13. const editor = this.editor;
  14. const t = editor.t;
  15. this._createButton( 'indent', t( 'Indent' ) );
  16. this._createButton( 'outdent', t( 'Outdent' ) );
  17. }
  18. _createButton( commandName, label ) {
  19. const editor = this.editor;
  20. editor.ui.componentFactory.add( commandName, locale => {
  21. const command = editor.commands.get( commandName );
  22. const view = new ButtonView( locale );
  23. view.set( {
  24. label,
  25. withText: true,
  26. tooltip: true
  27. } );
  28. view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
  29. // Execute command.
  30. this.listenTo( view, 'execute', () => editor.execute( commandName ) );
  31. return view;
  32. } );
  33. }
  34. afterInit() {
  35. const editor = this.editor;
  36. const indentCommand = new MultiCommand( editor );
  37. indentCommand.registerChildCommand( editor.commands.get( 'indentList' ) );
  38. editor.commands.add( 'indent', indentCommand );
  39. const outdentCommand = new MultiCommand( editor );
  40. outdentCommand.registerChildCommand( editor.commands.get( 'outdentList' ) );
  41. editor.commands.add( 'outdent', outdentCommand );
  42. }
  43. }
  44. ClassicEditor
  45. .create( document.querySelector( '#editor' ), {
  46. plugins: [ ArticlePluginSet, IndentOutdent ],
  47. toolbar: [
  48. 'heading',
  49. '|',
  50. 'bold',
  51. 'italic',
  52. 'link',
  53. '|',
  54. 'indent',
  55. 'outdent',
  56. '|',
  57. 'bulletedList',
  58. 'numberedList',
  59. '|',
  60. 'blockQuote',
  61. 'insertTable',
  62. 'mediaEmbed',
  63. 'undo',
  64. 'redo'
  65. ],
  66. image: {
  67. toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  68. },
  69. table: {
  70. contentToolbar: [
  71. 'tableColumn',
  72. 'tableRow',
  73. 'mergeTableCells'
  74. ]
  75. }
  76. } )
  77. .then( editor => {
  78. window.editor = editor;
  79. } )
  80. .catch( err => {
  81. console.error( err.stack );
  82. } );