8
0

fontbackgroundcolor.js 4.9 KB

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