8
0

highlight.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module highlight/highlight
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import HighlightEditing from './highlightediting';
  10. import HighlightUI from './highlightui';
  11. /**
  12. * The highlight plugin.
  13. *
  14. * It loads the {@link module:highlight/highlightediting~HighlightEditing} and
  15. * {@link module:highlight/highlightui~HighlightUI} plugins.
  16. *
  17. * Read more about the feature in the {@glink api/highlight highlight package} page.
  18. *
  19. * @extends module:core/plugin~Plugin
  20. */
  21. export default class Highlight extends Plugin {
  22. /**
  23. * @inheritDoc
  24. */
  25. static get requires() {
  26. return [ HighlightEditing, HighlightUI ];
  27. }
  28. /**
  29. * @inheritDoc
  30. */
  31. static get pluginName() {
  32. return 'Highlight';
  33. }
  34. }
  35. /**
  36. * The highlight option descriptor. See the {@link module:highlight/highlight~HighlightConfig} to learn more.
  37. *
  38. * {
  39. * model: 'pinkMarker',
  40. * class: 'marker-pink',
  41. * title: 'Pink Marker',
  42. * color: '#ff6fff',
  43. * type: 'marker'
  44. * }
  45. *
  46. * @typedef {Object} module:highlight/highlight~HighlightOption
  47. * @property {String} title The user-readable title of the option.
  48. * @property {String} model The unique attribute value in the model.
  49. * @property {String} color The color used for the highlighter. It should match the `class` CSS definition.
  50. * The color is used in the user interface to represent the highlighter.
  51. * @property {String} class The CSS class used on the `<mark>` element in the view. It should match the `color` setting.
  52. * @property {'marker'|'pen'} type The type of highlighter:
  53. * - `'marker'` – uses the `color` as a `background-color` style,
  54. * - `'pen'` – uses the `color` as a font `color` style.
  55. */
  56. /**
  57. * The configuration of the {@link module:highlight/highlight~Highlight} feature.
  58. *
  59. * Read more in {@link module:highlight/highlight~HighlightConfig}.
  60. *
  61. * @member {module:highlight/highlight~HighlightConfig} module:core/editor/editorconfig~EditorConfig#highlight
  62. */
  63. /**
  64. * The configuration of the {@link module:highlight/highlight~Highlight Highlight feature}.
  65. *
  66. * ClassicEditor
  67. * .create( editorElement, {
  68. * highlight: ... // Highlight feature config.
  69. * } )
  70. * .then( ... )
  71. * .catch( ... );
  72. *
  73. * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
  74. *
  75. * @interface HighlightConfig
  76. */
  77. /**
  78. * The available highlighters options. The default value is:
  79. *
  80. * options: [
  81. * { model: 'marker', class: 'marker', title: 'Marker', color: '#ffff66', type: 'marker' },
  82. * { model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#66ff00', type: 'marker' },
  83. * { model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#ff6fff', type: 'marker' },
  84. * { model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#ff2929', type: 'pen' },
  85. * { model: 'bluePen', class: 'pen-blue', title: 'Blue pen', color: '#0091ff', type: 'pen' }
  86. * ]
  87. *
  88. * There are two types of highlighters available:
  89. * - `'marker'` - rendered as a `<mark>` element, styled with the `background-color`,
  90. * - `'pen'` - rendered as a `<mark>` element, styled with the font `color`.
  91. *
  92. * **Note**: A style sheet with CSS classes is required for the configuration to work properly.
  93. * The highlight feature does not provide the actual styles by itself.
  94. *
  95. * **Note**: It is recommended that the `color` value should correspond to the class in the content
  96. * style sheet. It represents the highlighter in the user interface of the editor.
  97. *
  98. * ClassicEditor
  99. * .create( editorElement, {
  100. * highlight: {
  101. * options: [
  102. * {
  103. * model: 'pinkMarker',
  104. * class: 'marker-pink',
  105. * title: 'Pink Marker',
  106. * color: '#ff6fff',
  107. * type: 'marker'
  108. * },
  109. * {
  110. * model: 'redPen',
  111. * class: 'pen-red',
  112. * title: 'Red Pen',
  113. * color: '#ff2929',
  114. * type: 'pen'
  115. * },
  116. * ]
  117. * }
  118. * } )
  119. * .then( ... )
  120. * .catch( ... );
  121. *
  122. * @member {Array.<module:highlight/highlight~HighlightOption>} module:highlight/highlight~HighlightConfig#options
  123. */