inlineeditor.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  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 mix from '@ckeditor/ckeditor5-utils/src/mix';
  17. /**
  18. * The {@glink builds/guides/overview#Inline-editor inline editor} implementation.
  19. * It uses an inline editable and a floating toolbar.
  20. * See the {@glink examples/builds/inline-editor demo}.
  21. *
  22. * In order to create a inline editor instance, use the static
  23. * {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEditor.create()`} method.
  24. *
  25. * # Inline editor and inline build
  26. *
  27. * The inline editor can be used directly from source (if you installed the
  28. * [`@ckeditor/ckeditor5-editor-inline`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-inline) package)
  29. * but it is also available in the {@glink builds/guides/overview#Inline-editor inline build}.
  30. *
  31. * {@glink builds/guides/overview Builds} are ready-to-use editors with plugins bundled in. When using the editor from
  32. * source you need to take care of loading all plugins by yourself
  33. * (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option).
  34. * Using the editor from source gives much better flexibility and allows easier customization.
  35. *
  36. * Read more about initializing the editor from source or as a build in
  37. * {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEditor.create()`}.
  38. *
  39. * @mixes module:core/editor/utils/dataapimixin~DataApiMixin
  40. * @mixes module:core/editor/utils/elementapimixin~ElementApiMixin
  41. * @implements module:core/editor/editorwithui~EditorWithUI
  42. * @extends module:core/editor/editor~Editor
  43. */
  44. export default class InlineEditor extends Editor {
  45. /**
  46. * Creates an instance of the inline editor.
  47. *
  48. * **Note:** do not use the constructor to create editor instances. Use the static
  49. * {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEditor.create()`} method instead.
  50. *
  51. * @protected
  52. * @param {HTMLElement} element The DOM element that will be the source for the created editor
  53. * (on which the editor will be initialized).
  54. * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
  55. */
  56. constructor( element, config ) {
  57. super( config );
  58. this.element = element;
  59. this.data.processor = new HtmlDataProcessor();
  60. this.model.document.createRoot();
  61. this.ui = new InlineEditorUI( this, new InlineEditorUIView( this.locale, element ) );
  62. attachToForm( this );
  63. }
  64. /**
  65. * Destroys the editor instance, releasing all resources used by it.
  66. *
  67. * Updates the original editor element with the data.
  68. *
  69. * @returns {Promise}
  70. */
  71. destroy() {
  72. // Cache the data, then destroy.
  73. // It's safe to assume that the model->view conversion will not work after super.destroy().
  74. const data = this.getData();
  75. this.ui.destroy();
  76. return super.destroy()
  77. .then( () => setDataInElement( this.element, data ) );
  78. }
  79. /**
  80. * Creates a inline editor instance.
  81. *
  82. * Creating instance when using {@glink builds/index CKEditor build}:
  83. *
  84. * InlineEditor
  85. * .create( document.querySelector( '#editor' ) )
  86. * .then( editor => {
  87. * console.log( 'Editor was initialized', editor );
  88. * } )
  89. * .catch( err => {
  90. * console.error( err.stack );
  91. * } );
  92. *
  93. * Creating instance when using CKEditor from source (make sure to specify the list of plugins to load and the toolbar):
  94. *
  95. * import InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
  96. * import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  97. * import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  98. * import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  99. * import ...
  100. *
  101. * InlineEditor
  102. * .create( document.querySelector( '#editor' ), {
  103. * plugins: [ Essentials, Bold, Italic, ... ],
  104. * toolbar: [ 'bold', 'italic', ... ]
  105. * } )
  106. * .then( editor => {
  107. * console.log( 'Editor was initialized', editor );
  108. * } )
  109. * .catch( err => {
  110. * console.error( err.stack );
  111. * } );
  112. *
  113. * @param {HTMLElement} element The DOM element that will be the source for the created editor
  114. * (on which the editor will be initialized).
  115. * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
  116. * @returns {Promise} A promise resolved once the editor is ready.
  117. * The promise returns the created {@link module:editor-inline/inlineeditor~InlineEditor} instance.
  118. */
  119. static create( element, config ) {
  120. return new Promise( resolve => {
  121. const editor = new this( element, config );
  122. resolve(
  123. editor.initPlugins()
  124. .then( () => {
  125. editor.ui.init();
  126. editor.fire( 'uiReady' );
  127. } )
  128. .then( () => editor.loadDataFromElement() )
  129. .then( () => {
  130. editor.fire( 'dataReady' );
  131. editor.fire( 'ready' );
  132. } )
  133. .then( () => editor )
  134. );
  135. } );
  136. }
  137. }
  138. mix( InlineEditor, DataApiMixin );
  139. mix( InlineEditor, ElementApiMixin );