8
0

inline.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module editor-inline/inline
  7. */
  8. import StandardEditor from '@ckeditor/ckeditor5-core/src/editor/standardeditor';
  9. import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
  10. import InlineEditorUI from './inlineeditorui';
  11. import InlineEditorUIView from './inlineeditoruiview';
  12. import '../theme/theme.scss';
  13. /**
  14. * Inline editor. Uses an inline editable and a floating toolbar.
  15. *
  16. * @extends module:core/editor/standardeditor~StandardEditor
  17. */
  18. export default class InlineEditor extends StandardEditor {
  19. /**
  20. * Creates an instance of the inline editor.
  21. *
  22. * @param {HTMLElement} element The DOM element that will be the source for the created editor.
  23. * @param {Object} config The editor configuration.
  24. */
  25. constructor( element, config ) {
  26. super( element, config );
  27. this.document.createRoot();
  28. this.data.processor = new HtmlDataProcessor();
  29. this.ui = new InlineEditorUI( this, new InlineEditorUIView( this.locale, element ) );
  30. }
  31. /**
  32. * Destroys the editor instance, releasing all resources used by it.
  33. *
  34. * Updates the original editor element with the data.
  35. *
  36. * @returns {Promise}
  37. */
  38. destroy() {
  39. return this.ui.destroy()
  40. .then( () => super.destroy() )
  41. .then( () => this.updateEditorElement() );
  42. }
  43. /**
  44. * Creates an inline editor instance.
  45. *
  46. * InlineEditor.create( document.querySelector( '#editor' ), {
  47. * plugins: [ Delete, Enter, Typing, Paragraph, Undo, Bold, Italic ],
  48. * toolbar: [ 'bold', 'italic', 'undo', 'redo' ]
  49. * } )
  50. * .then( editor => {
  51. * console.log( 'Editor was initialized', editor );
  52. * } )
  53. * .catch( err => {
  54. * console.error( err.stack );
  55. * } );
  56. *
  57. * @param {HTMLElement} element See {@link module:editor-inline/inline~InlineEditor#constructor}'s parameters.
  58. * @param {Object} config See {@link module:editor-inline/inline~InlineEditor#constructor}'s parameters.
  59. * @returns {Promise} A promise resolved once the editor is ready.
  60. * @returns {module:core/editor/standardeditor~StandardEditor} return.editor The editor instance.
  61. */
  62. static create( element, config ) {
  63. return new Promise( resolve => {
  64. const editor = new InlineEditor( element, config );
  65. resolve(
  66. editor.initPlugins()
  67. .then( () => editor.ui.init() )
  68. .then( () => editor.fire( 'uiReady' ) )
  69. .then( () => editor.loadDataFromEditorElement() )
  70. .then( () => {
  71. editor.fire( 'dataReady' );
  72. editor.fire( 'ready' );
  73. } )
  74. .then( () => editor )
  75. );
  76. } );
  77. }
  78. }