table-styling.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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 ClassicEditor, CKEditorPlugins, console, window, document */
  6. import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
  7. const COLOR_PALETTE = [
  8. {
  9. color: 'hsl(0, 0%, 0%)',
  10. label: 'Black'
  11. },
  12. {
  13. color: 'hsl(0, 0%, 30%)',
  14. label: 'Dim grey'
  15. },
  16. {
  17. color: 'hsl(0, 0%, 60%)',
  18. label: 'Grey'
  19. },
  20. {
  21. color: 'hsl(0, 0%, 90%)',
  22. label: 'Light grey'
  23. },
  24. {
  25. color: 'hsl(0, 0%, 100%)',
  26. label: 'White',
  27. hasBorder: true
  28. },
  29. {
  30. color: 'hsl(0, 100%, 89%)',
  31. label: 'Pink'
  32. },
  33. {
  34. color: 'hsl(0, 75%, 60%)',
  35. label: 'Red'
  36. },
  37. {
  38. color: 'hsl(60, 75%, 60%)',
  39. label: 'Yellow'
  40. },
  41. {
  42. color: 'hsl(27, 100%, 85%)',
  43. label: 'Light Orange'
  44. },
  45. {
  46. color: 'hsl(30, 75%, 60%)',
  47. label: 'Orange'
  48. },
  49. {
  50. color: 'hsl(90, 75%, 60%)',
  51. label: 'Light green'
  52. },
  53. {
  54. color: 'hsl(120, 75%, 60%)',
  55. label: 'Green'
  56. },
  57. {
  58. color: 'hsl(150, 75%, 60%)',
  59. label: 'Aquamarine'
  60. },
  61. {
  62. color: 'hsl(120, 100%, 25%)',
  63. label: 'Dark green'
  64. },
  65. {
  66. color: 'hsl(180, 75%, 60%)',
  67. label: 'Turquoise'
  68. },
  69. {
  70. color: 'hsl(180, 52%, 58%)',
  71. label: 'Light Aqua'
  72. },
  73. {
  74. color: 'hsl(180, 97%, 31%)',
  75. label: 'Aqua'
  76. },
  77. {
  78. color: 'hsl(210, 75%, 60%)',
  79. label: 'Light blue'
  80. },
  81. {
  82. color: 'hsl(240, 75%, 60%)',
  83. label: 'Blue'
  84. },
  85. {
  86. color: 'hsl(270, 75%, 60%)',
  87. label: 'Purple'
  88. }
  89. ];
  90. ClassicEditor
  91. .create( document.querySelector( '#snippet-table-styling' ), {
  92. extraPlugins: [
  93. CKEditorPlugins.TableProperties,
  94. CKEditorPlugins.TableCellProperties
  95. ],
  96. cloudServices: CS_CONFIG,
  97. toolbar: {
  98. items: [
  99. 'insertTable', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
  100. ],
  101. viewportTopOffset: window.getViewportTopOffsetConfig()
  102. },
  103. table: {
  104. contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ],
  105. tableProperties: {
  106. borderColors: COLOR_PALETTE,
  107. backgroundColors: COLOR_PALETTE
  108. },
  109. tableCellProperties: {
  110. borderColors: COLOR_PALETTE,
  111. backgroundColors: COLOR_PALETTE
  112. }
  113. }
  114. } )
  115. .then( editor => {
  116. window.editorStyling = editor;
  117. } )
  118. .catch( err => {
  119. console.error( err.stack );
  120. } );