table-styling.js 2.1 KB

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