standardcreator.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. 'use strict';
  6. import Creator from './creator.js';
  7. import HtmlDataProcessor from '../engine/dataprocessor/htmldataprocessor.js';
  8. /**
  9. * Standard creator for browser environment.
  10. *
  11. * @memberOf ckeditor5.creator
  12. * @extends ckeditor5.creator.Creator
  13. */
  14. export default class StandardCreator extends Creator {
  15. /**
  16. * Creates an instance of the standard creator. Initializes the engine ({@link engine.model.Document document},
  17. * {@link engine.EditingController editing controller} and
  18. * {@link engine.DataController data controller}).
  19. *
  20. * @param {ckeditor5.Editor} editor The editor instance.
  21. * @param {engine.dataProcessor.DataProcessor} [dataProcessor=engine.dataProcessor.HtmlDataProcessor] The data
  22. * processor to use. If no data processor is provided {@link engine.dataProcessor.HtmlDataProcessor HtmlDataProcessor}
  23. * will be used.
  24. */
  25. constructor( editor, dataProcessor = new HtmlDataProcessor() ) {
  26. super( editor );
  27. editor.data.processor = dataProcessor;
  28. /**
  29. * The elements replaced by {@link ckeditor5.creator.StandardCreator#_replaceElement} and their replacements.
  30. *
  31. * @private
  32. * @member {Array.<Object>} ckeditor5.creator.StandardCreator#_replacedElements
  33. */
  34. this._replacedElements = [];
  35. }
  36. destroy() {
  37. super.destroy();
  38. this._restoreElements();
  39. }
  40. /**
  41. * Updates the {@link ckeditor5.Editor#element editor element}'s content with the data.
  42. *
  43. * @param [elementName] If not specified, the first element will be used.
  44. */
  45. updateEditorElement( elementName ) {
  46. if ( !elementName ) {
  47. elementName = this.editor.firstElementName;
  48. }
  49. StandardCreator.setDataInElement( this.editor.elements.get( elementName ), this.editor.getData( elementName ) );
  50. }
  51. /**
  52. * Updates all {@link ckeditor5.Editor#element editor elements} content with the data taken from
  53. * their corresponding editables.
  54. */
  55. updateEditorElements() {
  56. this.editor.elements.forEach( ( editorElement, elementName ) => {
  57. this.updateEditorElement( elementName );
  58. } );
  59. }
  60. /**
  61. * Loads the data from the given {@link ckeditor5.Editor#element editor element} to the editable.
  62. *
  63. * @param [elementName] If not specified, the first element will be used.
  64. */
  65. loadDataFromEditorElement( elementName ) {
  66. if ( !elementName ) {
  67. elementName = this.editor.firstElementName;
  68. }
  69. this.editor.setData( StandardCreator.getDataFromElement( this.editor.elements.get( elementName ) ), elementName );
  70. }
  71. /**
  72. * Loads the data from all {@link ckeditor5.Editor#element editor elements} to their corresponding editables.
  73. */
  74. loadDataFromEditorElements() {
  75. this.editor.elements.forEach( ( editorElement, elementName ) => {
  76. this.loadDataFromEditorElement( elementName );
  77. } );
  78. }
  79. /**
  80. * Gets data from a given source element.
  81. *
  82. * @param {HTMLElement} el The element from which the data will be retrieved.
  83. * @returns {String} The data string.
  84. */
  85. static getDataFromElement( el ) {
  86. if ( el instanceof HTMLTextAreaElement ) {
  87. return el.value;
  88. }
  89. return el.innerHTML;
  90. }
  91. /**
  92. * Sets data in a given element.
  93. *
  94. * @param {HTMLElement} el The element in which the data will be set.
  95. * @param {String} data The data string.
  96. */
  97. static setDataInElement( el, data ) {
  98. if ( el instanceof HTMLTextAreaElement ) {
  99. el.value = data;
  100. }
  101. el.innerHTML = data;
  102. }
  103. /**
  104. * Hides one of the {@link ckeditor5.Editor#elements editor elements} and, if specified, inserts the the given element
  105. * (e.g. the editor's UI main element) next to it.
  106. *
  107. * The effect of this method will be automatically reverted by {@link ckeditor5.creator.StandardCreator#destroy destroy}.
  108. *
  109. * The second argument may not be passed and then the element will be replaced by nothing, so in other words it will
  110. * be hidden.
  111. *
  112. * @protected
  113. * @param {HTMLElement} element The element to replace.
  114. * @param {HTMLElement} [newElement] The replacement element. If not passed, then the `element` will just be hidden.
  115. */
  116. _replaceElement( element, newElement ) {
  117. this._replacedElements.push( { element, newElement } );
  118. element.style.display = 'none';
  119. if ( newElement ) {
  120. element.parentNode.insertBefore( newElement, element.nextSibling );
  121. }
  122. }
  123. /**
  124. * Restores what the {@link ckeditor5.creator.StandardCreator#_replaceElement _replaceElement} did.
  125. *
  126. * @protected
  127. */
  128. _restoreElements() {
  129. this._replacedElements.forEach( ( { element, newElement } ) => {
  130. element.style.display = '';
  131. if ( newElement ) {
  132. newElement.remove();
  133. }
  134. } );
  135. this._replacedElements = [];
  136. }
  137. }