8
0

table-styling.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  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',
  100. '|',
  101. 'fontFamily', 'fontSize',
  102. '|',
  103. 'bold', 'italic',
  104. '|',
  105. 'alignment:left', 'alignment:center', 'alignment:right', 'alignment:justify',
  106. '|',
  107. 'bulletedList', 'numberedList',
  108. '|',
  109. 'indent', 'outdent',
  110. '|',
  111. 'link', 'blockQuote',
  112. '|',
  113. 'undo', 'redo'
  114. ],
  115. viewportTopOffset: window.getViewportTopOffsetConfig()
  116. },
  117. table: {
  118. contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ],
  119. tableProperties: {
  120. borderColors: COLOR_PALETTE,
  121. backgroundColors: COLOR_PALETTE
  122. },
  123. tableCellProperties: {
  124. borderColors: COLOR_PALETTE,
  125. backgroundColors: COLOR_PALETTE
  126. }
  127. }
  128. } )
  129. .then( editor => {
  130. window.editorStyling = editor;
  131. } )
  132. .catch( err => {
  133. console.error( err.stack );
  134. } );