standardcreator.js 4.8 KB

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