classic.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  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 StandardEditor from '../editor/standardeditor.js';
  7. import HtmlDataProcessor from '../engine/dataprocessor/htmldataprocessor.js';
  8. import BoxedEditorUI from '../ui/editorui/boxed/boxededitorui.js';
  9. import BoxedEditorUIView from '../ui/editorui/boxed/boxededitoruiview.js';
  10. import EditableUI from '../ui/editableui/editableui.js';
  11. import InlineEditableUIView from '../ui/editableui/inline/inlineeditableuiview.js';
  12. import Model from '../ui/model.js';
  13. import StickyToolbar from '../ui/bindings/stickytoolbar.js';
  14. import StickyToolbarView from '../ui/stickytoolbar/stickytoolbarview.js';
  15. import ElementReplacer from '../utils/elementreplacer.js';
  16. /**
  17. * Classic editor creator using inline editable and sticky toolbar, all
  18. * enclosed in a boxed UI.
  19. *
  20. * @memberOf editor-classic
  21. * @extends ckeditor5.editor.StandardEditor
  22. */
  23. export default class ClassicEditor extends StandardEditor {
  24. /**
  25. * Creates an instance of the classic creator.
  26. *
  27. * @param {ckeditor5.Editor} The editor instance.
  28. */
  29. constructor( element, config ) {
  30. super( element, config );
  31. this.document.createRoot();
  32. this.editing.createRoot( 'div' );
  33. this.data.processor = new HtmlDataProcessor();
  34. this._elementReplacer = new ElementReplacer();
  35. }
  36. /**
  37. * Updates the original editor element with data and destroys
  38. * the UI.
  39. *
  40. * @returns {Promise}
  41. */
  42. destroy() {
  43. this.updateEditorElement();
  44. this._elementReplacer.restore();
  45. return this.ui.destroy()
  46. .then( () => super.destroy() );
  47. }
  48. _createUI() {
  49. const editorUI = new BoxedEditorUI( this );
  50. const editorUIView = new BoxedEditorUIView( editorUI.viewModel, this.locale );
  51. editorUI.view = editorUIView;
  52. this.ui = editorUI;
  53. this._createToolbar();
  54. this._createEditableUI();
  55. this._elementReplacer.replace( this.element, this.ui.view.element );
  56. return Promise.resolve();
  57. }
  58. _initUI() {
  59. this._toolbar.addButtons( this.config.toolbar );
  60. return this.ui.init()
  61. .then( () => this.editing.view.attachDomRoot( this._editableUI.view.element ) );
  62. }
  63. static create( element, config ) {
  64. const editor = new ClassicEditor( element, config );
  65. return editor._createUI()
  66. .then( () => editor.initPlugins() )
  67. .then( () => editor._initUI() )
  68. .then( () => editor.loadDataFromEditorElement() )
  69. .then( () => editor );
  70. }
  71. /**
  72. * Creates editor sticky toolbar and fills it with children using the configuration.
  73. *
  74. * @protected
  75. */
  76. _createToolbar() {
  77. // Note: StickyToolbar and StickyToolbarView share the same model. It may change in the future.
  78. const toolbarModel = new Model();
  79. const toolbarView = new StickyToolbarView( toolbarModel, this.locale );
  80. const toolbar = new StickyToolbar( toolbarModel, toolbarView, this );
  81. this.ui.add( 'top', toolbar );
  82. this._toolbar = toolbar;
  83. }
  84. _createEditableUI() {
  85. const editable = this.editing.view.getRoot();
  86. const editableUI = new EditableUI( this, editable );
  87. const editableUIView = new InlineEditableUIView( editableUI.viewModel, this.locale );
  88. editableUI.view = editableUIView;
  89. this.ui.add( 'main', editableUI );
  90. this._editableUI = editableUI;
  91. }
  92. }