article.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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. class IndentBlock extends Plugin {
  45. init() {
  46. const schema = this.editor.model.schema;
  47. const conversion = this.editor.conversion;
  48. schema.extend( 'paragraph', { allowAttributes: 'indent' } );
  49. schema.extend( 'heading1', { allowAttributes: 'indent' } );
  50. conversion.for( 'upcast' ).attributeToAttribute( {
  51. view: {
  52. styles: {
  53. 'margin-left': /[\s\S]+/
  54. }
  55. },
  56. model: {
  57. key: 'indent',
  58. value: viewElement => {
  59. return viewElement.getStyle( 'margin-left' );
  60. }
  61. }
  62. } );
  63. conversion.for( 'downcast' ).attributeToAttribute( {
  64. model: 'indent',
  65. view: modelAttributeValue => {
  66. return {
  67. key: 'style',
  68. value: {
  69. 'margin-left': modelAttributeValue
  70. }
  71. };
  72. }
  73. } );
  74. }
  75. }
  76. ClassicEditor
  77. .create( document.querySelector( '#editor' ), {
  78. plugins: [ ArticlePluginSet, IndentOutdent, IndentBlock ],
  79. toolbar: [
  80. 'heading',
  81. '|',
  82. 'bold',
  83. 'italic',
  84. 'link',
  85. '|',
  86. 'indent',
  87. 'outdent',
  88. '|',
  89. 'bulletedList',
  90. 'numberedList',
  91. '|',
  92. 'blockQuote',
  93. 'insertTable',
  94. 'mediaEmbed',
  95. 'undo',
  96. 'redo'
  97. ],
  98. image: {
  99. toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  100. },
  101. table: {
  102. contentToolbar: [
  103. 'tableColumn',
  104. 'tableRow',
  105. 'mergeTableCells'
  106. ]
  107. }
  108. } )
  109. .then( editor => {
  110. window.editor = editor;
  111. } )
  112. .catch( err => {
  113. console.error( err.stack );
  114. } );