highlightediting.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module highlight/highlightediting
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import HighlightCommand from './highlightcommand';
  10. /**
  11. * The highlight editing feature. It introduces the {@link module:highlight/highlightcommand~HighlightCommand command} and the `highlight`
  12. * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
  13. * as a `<mark>` element with the class attribute (`<span class="marker-green">...</span>`) depending
  14. * on the {@link module:highlight/highlight~HighlightConfig configuration}.
  15. *
  16. * @extends module:core/plugin~Plugin
  17. */
  18. export default class HighlightEditing extends Plugin {
  19. /**
  20. * @inheritDoc
  21. */
  22. constructor( editor ) {
  23. super( editor );
  24. editor.config.define( 'highlight', {
  25. options: [
  26. { model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', color: '#fdfd77', type: 'marker' },
  27. { model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#63f963', type: 'marker' },
  28. { model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#fc7999', type: 'marker' },
  29. { model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: '#72cdfd', type: 'marker' },
  30. { model: 'redPen', class: 'pen-red', title: 'Red pen', color: '#e91313', type: 'pen' },
  31. { model: 'greenPen', class: 'pen-green', title: 'Green pen', color: '#118800', type: 'pen' }
  32. ]
  33. } );
  34. }
  35. /**
  36. * @inheritDoc
  37. */
  38. init() {
  39. const editor = this.editor;
  40. // Allow highlight attribute on text nodes.
  41. editor.model.schema.extend( '$text', { allowAttributes: 'highlight' } );
  42. const options = editor.config.get( 'highlight.options' );
  43. // Set-up the two-way conversion.
  44. editor.conversion.attributeToElement( _buildDefinition( options ) );
  45. editor.commands.add( 'highlight', new HighlightCommand( editor ) );
  46. }
  47. }
  48. // Converts options array to a converter definition.
  49. //
  50. // @param {Array.<module:highlight/highlight~HighlightOption>} options Array with configured options.
  51. // @returns {module:engine/conversion/conversion~ConverterDefinition}
  52. function _buildDefinition( options ) {
  53. const definition = {
  54. model: {
  55. key: 'highlight',
  56. values: []
  57. },
  58. view: {}
  59. };
  60. for ( const option of options ) {
  61. definition.model.values.push( option.model );
  62. definition.view[ option.model ] = {
  63. name: 'mark',
  64. class: option.class
  65. };
  66. }
  67. return definition;
  68. }