restricted-editing.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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. /* globals window, document */
  6. import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
  7. import RestrictedEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/restrictededitingmode';
  8. import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode';
  9. import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
  10. import Table from '@ckeditor/ckeditor5-table/src/table';
  11. ClassicEditor.builtinPlugins.push(
  12. RestrictedEditingMode, StandardEditingMode, ArticlePluginSet, Table );
  13. const restrictedModeButton = document.getElementById( 'mode-restricted' );
  14. const standardModeButton = document.getElementById( 'mode-standard' );
  15. restrictedModeButton.addEventListener( 'change', handleModeChange );
  16. standardModeButton.addEventListener( 'change', handleModeChange );
  17. startMode( document.querySelector( 'input[name="editor-restriction-mode"]:checked' ).value );
  18. async function handleModeChange( evt ) {
  19. await startMode( evt.target.value );
  20. }
  21. async function startMode( selectedMode ) {
  22. if ( selectedMode === 'standard' ) {
  23. await startStandardEditingMode();
  24. } else {
  25. await startRestrictedEditingMode();
  26. }
  27. }
  28. async function startStandardEditingMode() {
  29. await reloadEditor( {
  30. removePlugins: [ 'RestrictedEditingMode' ],
  31. toolbar: [
  32. 'heading', '|', 'bold', 'italic', 'link', '|',
  33. 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', '|',
  34. 'restrictedEditingException', '|', 'undo', 'redo'
  35. ],
  36. image: {
  37. toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  38. },
  39. table: {
  40. contentToolbar: [
  41. 'tableColumn',
  42. 'tableRow',
  43. 'mergeTableCells'
  44. ]
  45. }
  46. } );
  47. }
  48. async function startRestrictedEditingMode() {
  49. await reloadEditor( {
  50. removePlugins: [ 'StandardEditingMode' ],
  51. toolbar: [ 'bold', 'italic', 'link', '|', 'restrictedEditing', '|', 'undo', 'redo' ]
  52. } );
  53. }
  54. async function reloadEditor( config ) {
  55. if ( window.editor ) {
  56. await window.editor.destroy();
  57. }
  58. window.editor = await ClassicEditor.create( document.querySelector( '#restricted-editing-editor' ), config );
  59. }