8
0

inlineeditor.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module editor-inline/inlineeditor
  7. */
  8. import Editor from '@ckeditor/ckeditor5-core/src/editor/editor';
  9. import DataApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin';
  10. import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin';
  11. import attachToForm from '@ckeditor/ckeditor5-core/src/editor/utils/attachtoform';
  12. import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
  13. import InlineEditorUI from './inlineeditorui';
  14. import InlineEditorUIView from './inlineeditoruiview';
  15. import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement';
  16. import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement';
  17. import mix from '@ckeditor/ckeditor5-utils/src/mix';
  18. import isElement from '@ckeditor/ckeditor5-utils/src/lib/lodash/isElement';
  19. import global from '@ckeditor/ckeditor5-utils/src/dom/global';
  20. /**
  21. * The {@glink builds/guides/overview#inline-editor inline editor} implementation.
  22. * It uses an inline editable and a floating toolbar.
  23. * See the {@glink examples/builds/inline-editor demo}.
  24. *
  25. * In order to create a inline editor instance, use the static
  26. * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method.
  27. *
  28. * # Inline editor and inline build
  29. *
  30. * The inline editor can be used directly from source (if you installed the
  31. * [`@ckeditor/ckeditor5-editor-inline`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-inline) package)
  32. * but it is also available in the {@glink builds/guides/overview#inline-editor inline build}.
  33. *
  34. * {@glink builds/guides/overview Builds} are ready-to-use editors with plugins bundled in. When using the editor from
  35. * source you need to take care of loading all plugins by yourself
  36. * (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option).
  37. * Using the editor from source gives much better flexibility and allows easier customization.
  38. *
  39. * Read more about initializing the editor from source or as a build in
  40. * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
  41. *
  42. * @mixes module:core/editor/utils/dataapimixin~DataApiMixin
  43. * @mixes module:core/editor/utils/elementapimixin~ElementApiMixin
  44. * @implements module:core/editor/editorwithui~EditorWithUI
  45. * @extends module:core/editor/editor~Editor
  46. */
  47. export default class InlineEditor extends Editor {
  48. /**
  49. * Creates an instance of the inline editor.
  50. *
  51. * **Note:** do not use the constructor to create editor instances. Use the static
  52. * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method instead.
  53. *
  54. * @protected
  55. * @param {HTMLElement|String} elementOrData The DOM element that will be the source for the created editor
  56. * (on which the editor will be initialized) or initial data for the editor. If data is provided, `editor.element`
  57. * will be created automatically and need to be added manually to the DOM. For more information see
  58. * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
  59. * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
  60. */
  61. constructor( elementOrData, config ) {
  62. super( config );
  63. this.data.processor = new HtmlDataProcessor();
  64. this.model.document.createRoot();
  65. if ( isElement( elementOrData ) ) {
  66. this.element = elementOrData;
  67. } else {
  68. this.element = global.document.createElement( 'div' );
  69. }
  70. this.ui = new InlineEditorUI( this, new InlineEditorUIView( this.locale, this.element ) );
  71. attachToForm( this );
  72. }
  73. /**
  74. * Destroys the editor instance, releasing all resources used by it.
  75. *
  76. * Updates the original editor element with the data.
  77. *
  78. * @returns {Promise}
  79. */
  80. destroy() {
  81. // Cache the data, then destroy.
  82. // It's safe to assume that the model->view conversion will not work after super.destroy().
  83. const data = this.getData();
  84. this.ui.destroy();
  85. return super.destroy()
  86. .then( () => setDataInElement( this.element, data ) );
  87. }
  88. /**
  89. * Creates a inline editor instance.
  90. *
  91. * Creating instance when using {@glink builds/index CKEditor build}:
  92. *
  93. * InlineEditor
  94. * .create( document.querySelector( '#editor' ) )
  95. * .then( editor => {
  96. * console.log( 'Editor was initialized', editor );
  97. * } )
  98. * .catch( err => {
  99. * console.error( err.stack );
  100. * } );
  101. *
  102. * Creating instance when using CKEditor from source (make sure to specify the list of plugins to load and the toolbar):
  103. *
  104. * import InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
  105. * import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  106. * import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  107. * import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  108. * import ...
  109. *
  110. * InlineEditor
  111. * .create( document.querySelector( '#editor' ), {
  112. * plugins: [ Essentials, Bold, Italic, ... ],
  113. * toolbar: [ 'bold', 'italic', ... ]
  114. * } )
  115. * .then( editor => {
  116. * console.log( 'Editor was initialized', editor );
  117. * } )
  118. * .catch( err => {
  119. * console.error( err.stack );
  120. * } );
  121. *
  122. * Creating instance when using initial data instead of DOM element:
  123. *
  124. * import InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
  125. * import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  126. * import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  127. * import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  128. * import ...
  129. *
  130. * InlineEditor
  131. * .create( '<p>Hello world!</p>, {
  132. * plugins: [ Essentials, Bold, Italic, ... ],
  133. * toolbar: [ 'bold', 'italic', ... ]
  134. * } )
  135. * .then( editor => {
  136. * console.log( 'Editor was initialized', editor );
  137. *
  138. * // Initial data was provided so `editor.element` needs to be added manually to the DOM.
  139. * document.body.appendChild( editor.element );
  140. * } )
  141. * .catch( err => {
  142. * console.error( err.stack );
  143. * } );
  144. *
  145. * @param {HTMLElement|String} elementOrData The DOM element that will be the source for the created editor
  146. * (on which the editor will be initialized) or initial data for the editor. If data is provided, `editor.element`
  147. * will be created automatically and need to be added manually to the DOM.
  148. * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
  149. * @returns {Promise} A promise resolved once the editor is ready.
  150. * The promise returns the created {@link module:editor-inline/inlineeditor~InlineEditor} instance.
  151. */
  152. static create( elementOrData, config ) {
  153. return new Promise( resolve => {
  154. const editor = new this( elementOrData, config );
  155. resolve(
  156. editor.initPlugins()
  157. .then( () => {
  158. editor.ui.init();
  159. editor.fire( 'uiReady' );
  160. } )
  161. .then( () => editor.data.init( isElement( elementOrData ) ? getDataFromElement( elementOrData ) : elementOrData ) )
  162. .then( () => {
  163. editor.fire( 'dataReady' );
  164. editor.fire( 'ready' );
  165. } )
  166. .then( () => editor )
  167. );
  168. } );
  169. }
  170. }
  171. mix( InlineEditor, DataApiMixin );
  172. mix( InlineEditor, ElementApiMixin );