fontsize.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  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/fontsize
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import FontSizeEditing from './fontsize/fontsizeediting';
  10. import FontSizeUI from './fontsize/fontsizeui';
  11. /**
  12. * The font size 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/fontsize/fontsizeediting~FontSizeEditing} and
  18. * {@link module:font/fontsize/fontsizeui~FontSizeUI} features in the editor.
  19. *
  20. * @extends module:core/plugin~Plugin
  21. */
  22. export default class FontSize extends Plugin {
  23. /**
  24. * @inheritDoc
  25. */
  26. static get requires() {
  27. return [ FontSizeEditing, FontSizeUI ];
  28. }
  29. /**
  30. * @inheritDoc
  31. */
  32. static get pluginName() {
  33. return 'FontSize';
  34. }
  35. }
  36. /**
  37. * The font size option descriptor.
  38. *
  39. * @typedef {Object} module:font/fontsize~FontSizeOption
  40. *
  41. * @property {String} title The user-readable title of the option.
  42. * @property {String} model The attribute's unique value in the model.
  43. * @property {module:engine/view/elementdefinition~ElementDefinition} view View element configuration.
  44. * @property {Array.<module:engine/view/elementdefinition~ElementDefinition>} [upcastAlso] An array with all matched elements that
  45. * the view-to-model conversion should also accept.
  46. */
  47. /**
  48. * The configuration of the font size feature.
  49. * It is introduced by the {@link module:font/fontsize/fontsizeediting~FontSizeEditing} feature.
  50. *
  51. * Read more in {@link module:font/fontsize~FontSizeConfig}.
  52. *
  53. * @member {module:font/fontsize~FontSizeConfig} module:core/editor/editorconfig~EditorConfig#fontSize
  54. */
  55. /**
  56. * The configuration of the font size feature.
  57. * This option is used by the {@link module:font/fontsize/fontsizeediting~FontSizeEditing} feature.
  58. *
  59. * ClassicEditor
  60. * .create( {
  61. * fontSize: ... // Font size feature configuration.
  62. * } )
  63. * .then( ... )
  64. * .catch( ... );
  65. *
  66. * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
  67. *
  68. * @interface module:font/fontsize~FontSizeConfig
  69. */
  70. /**
  71. * Available font size options. Expressed as predefined presets, numerical "pixel" values
  72. * or the {@link module:font/fontsize~FontSizeOption}.
  73. *
  74. * The default value is:
  75. *
  76. * const fontSizeConfig = {
  77. * options: [
  78. * 'tiny',
  79. * 'small',
  80. * 'default',
  81. * 'big',
  82. * 'huge'
  83. * ]
  84. * };
  85. *
  86. * It defines 4 sizes: **tiny**, **small**, **big**, and **huge**. These values will be rendered as `<span>` elements in the view.
  87. * The **default** defines a text without the `fontSize` attribute.
  88. *
  89. * Each `<span>` has the the `class` attribute set to the corresponding size name. For instance, this is what the **small** size looks
  90. * like in the view:
  91. *
  92. * <span class="text-small">...</span>
  93. *
  94. * As an alternative, the font size might be defined using numerical values (either as a `Number` or as a `String`):
  95. *
  96. * const fontSizeConfig = {
  97. * options: [ 9, 10, 11, 12, 13, 14, 15 ]
  98. * };
  99. *
  100. * Also, you can define a label in the dropdown for numerical values:
  101. *
  102. * const fontSizeConfig = {
  103. * options: [
  104. * {
  105. * title: 'Small',
  106. * model: '8px
  107. * },
  108. * 'default',
  109. * {
  110. * title: 'Big',
  111. * model: '14px
  112. * }
  113. * ]
  114. * };
  115. *
  116. * Font size can be applied using the command API. To do that, use the `'fontSize'` command and pass the desired font size as a `value`.
  117. * For example, the following code will apply the `fontSize` attribute with the **tiny** value to the current selection:
  118. *
  119. * editor.execute( 'fontSize', { value: 'tiny' } );
  120. *
  121. * Executing the `fontSize` command without value will remove the `fontSize` attribute from the current selection.
  122. *
  123. * @member {Array.<String|Number|module:font/fontsize~FontSizeOption>} module:font/fontsize~FontSizeConfig#options
  124. */
  125. /**
  126. * By default the plugin removes any `font-size` value that does not match the plugin's configuration. It means that if you paste content
  127. * with font sizes that the editor does not understand, the `font-size` attribute will be removed and the content will be displayed
  128. * with the default size.
  129. *
  130. * You can preserve pasted font size values by switching the `supportAllValues` option to `true`:
  131. *
  132. * const fontSizeConfig = {
  133. * options: [ 9, 10, 11, 12, 'default', 14, 15 ],
  134. * supportAllValues: true
  135. * };
  136. *
  137. * **Note:** This option can only be used with numerical values as font size options.
  138. *
  139. * With this configuration font sizes not specified in the editor configuration will not be removed when pasting the content.
  140. *
  141. * @member {Boolean} module:font/fontsize~FontSizeConfig#supportAllValues
  142. */