fontcolor.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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. /**
  6. * @module font/fontcolor
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import FontColorEditing from './fontcolor/fontcolorediting';
  10. import FontColorUI from './fontcolor/fontcolorui';
  11. /**
  12. * The font color plugin.
  13. *
  14. * For a detailed overview, check the {@glink features/font font feature} documentation
  15. * and the {@glink api/font package page}.
  16. *
  17. * This is a "glue" plugin which loads the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} and
  18. * {@link module:font/fontcolor/fontcolorui~FontColorUI} features in the editor.
  19. *
  20. * @extends module:core/plugin~Plugin
  21. */
  22. export default class FontColor extends Plugin {
  23. /**
  24. * @inheritDoc
  25. */
  26. static get requires() {
  27. return [ FontColorEditing, FontColorUI ];
  28. }
  29. /**
  30. * @inheritDoc
  31. */
  32. static get pluginName() {
  33. return 'FontColor';
  34. }
  35. }
  36. /**
  37. * The configuration of the font color feature.
  38. * It is introduced by the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} feature.
  39. *
  40. * Read more in {@link module:font/fontcolor~FontColorConfig}.
  41. *
  42. * @member {module:font/fontcolor~FontColorConfig} module:core/editor/editorconfig~EditorConfig#fontColor
  43. */
  44. /**
  45. * The configuration of the font color feature.
  46. * This option is used by the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} feature.
  47. *
  48. * ClassicEditor
  49. * .create( {
  50. * fontColor: ... // Font color feature configuration.
  51. * } )
  52. * .then( ... )
  53. * .catch( ... );
  54. *
  55. * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
  56. *
  57. * @interface module:font/fontcolor~FontColorConfig
  58. */
  59. /**
  60. * Available font colors defined as an array of strings or objects.
  61. *
  62. * The default value registers the following colors:
  63. *
  64. * const fontColorConfig = {
  65. * colors: [
  66. * {
  67. * color: 'hsl(0, 0%, 0%)',
  68. * label: 'Black'
  69. * },
  70. * {
  71. * color: 'hsl(0, 0%, 30%)',
  72. * label: 'Dim grey'
  73. * },
  74. * {
  75. * color: 'hsl(0, 0%, 60%)',
  76. * label: 'Grey'
  77. * },
  78. * {
  79. * color: 'hsl(0, 0%, 90%)',
  80. * label: 'Light grey'
  81. * },
  82. * {
  83. * color: 'hsl(0, 0%, 100%)',
  84. * label: 'White',
  85. * hasBorder: true
  86. * },
  87. * {
  88. * color: 'hsl(0, 75%, 60%)',
  89. * label: 'Red'
  90. * },
  91. * {
  92. * color: 'hsl(30, 75%, 60%)',
  93. * label: 'Orange'
  94. * },
  95. * {
  96. * color: 'hsl(60, 75%, 60%)',
  97. * label: 'Yellow'
  98. * },
  99. * {
  100. * color: 'hsl(90, 75%, 60%)',
  101. * label: 'Light green'
  102. * },
  103. * {
  104. * color: 'hsl(120, 75%, 60%)',
  105. * label: 'Green'
  106. * },
  107. * {
  108. * color: 'hsl(150, 75%, 60%)',
  109. * label: 'Aquamarine'
  110. * },
  111. * {
  112. * color: 'hsl(180, 75%, 60%)',
  113. * label: 'Turquoise'
  114. * },
  115. * {
  116. * color: 'hsl(210, 75%, 60%)',
  117. * label: 'Light blue'
  118. * },
  119. * {
  120. * color: 'hsl(240, 75%, 60%)',
  121. * label: 'Blue'
  122. * },
  123. * {
  124. * color: 'hsl(270, 75%, 60%)',
  125. * label: 'Purple'
  126. * }
  127. * ]
  128. * };
  129. *
  130. * **Note**: The colors are displayed in the `'fontColor'` dropdown.
  131. *
  132. * @member {Array.<String|Object>} module:font/fontcolor~FontColorConfig#colors
  133. */
  134. /**
  135. * Represents the number of columns in the font color dropdown.
  136. *
  137. * The default value is:
  138. *
  139. * const fontColorConfig = {
  140. * columns: 5
  141. * }
  142. *
  143. * @member {Number} module:font/fontcolor~FontColorConfig#columns
  144. */
  145. /**
  146. * Determines the maximum number of available document colors.
  147. * Setting it to `0` will disable the document colors feature.
  148. *
  149. * By default it equals to the {@link module:font/fontcolor~FontColorConfig#columns} value.
  150. *
  151. * Examples:
  152. *
  153. * // 1) Neither document colors nor columns are defined in the configuration.
  154. * // Document colors will equal 5,
  155. * // because the value will be inherited from columns,
  156. * // which has a predefined value of 5.
  157. * const fontColorConfig = {}
  158. *
  159. * // 2) Document colors will equal 8, because the value will be inherited from columns.
  160. * const fontColorConfig = {
  161. * columns: 8
  162. * }
  163. *
  164. * // 3) Document colors will equal 24, because it has its own value defined.
  165. * const fontColorConfig = {
  166. * columns: 8,
  167. * documentColors: 24
  168. * }
  169. *
  170. * // 4) The document colors feature will be disabled.
  171. * const fontColorConfig = {
  172. * columns: 8,
  173. * documentColors: 0
  174. * }
  175. *
  176. * @member {Number} module:font/fontcolor~FontColorConfig#documentColors
  177. */