|
|
@@ -0,0 +1,123 @@
|
|
|
+/**
|
|
|
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
|
|
|
+ * For licensing, see LICENSE.md.
|
|
|
+ */
|
|
|
+
|
|
|
+'use strict';
|
|
|
+
|
|
|
+import StandardEditor from '../editor/standardeditor.js';
|
|
|
+
|
|
|
+import HtmlDataProcessor from '../engine/dataprocessor/htmldataprocessor.js';
|
|
|
+
|
|
|
+import BoxedEditorUI from '../ui/editorui/boxed/boxededitorui.js';
|
|
|
+import BoxedEditorUIView from '../ui/editorui/boxed/boxededitoruiview.js';
|
|
|
+
|
|
|
+import EditableUI from '../ui/editableui/editableui.js';
|
|
|
+import InlineEditableUIView from '../ui/editableui/inline/inlineeditableuiview.js';
|
|
|
+
|
|
|
+import Model from '../ui/model.js';
|
|
|
+import StickyToolbar from '../ui/bindings/stickytoolbar.js';
|
|
|
+import StickyToolbarView from '../ui/stickytoolbar/stickytoolbarview.js';
|
|
|
+
|
|
|
+import ElementReplacer from '../utils/elementreplacer.js';
|
|
|
+
|
|
|
+/**
|
|
|
+ * Classic editor creator using inline editable and sticky toolbar, all
|
|
|
+ * enclosed in a boxed UI.
|
|
|
+ *
|
|
|
+ * @memberOf editor-classic
|
|
|
+ * @extends ckeditor5.editor.StandardEditor
|
|
|
+ */
|
|
|
+export default class ClassicEditor extends StandardEditor {
|
|
|
+ /**
|
|
|
+ * Creates an instance of the classic creator.
|
|
|
+ *
|
|
|
+ * @param {ckeditor5.Editor} The editor instance.
|
|
|
+ */
|
|
|
+ constructor( element, config ) {
|
|
|
+ super( element, config );
|
|
|
+
|
|
|
+ this.document.createRoot();
|
|
|
+
|
|
|
+ this.editing.createRoot( 'div' );
|
|
|
+
|
|
|
+ this.data.processor = new HtmlDataProcessor();
|
|
|
+
|
|
|
+ this._elementReplacer = new ElementReplacer();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Updates the original editor element with data and destroys
|
|
|
+ * the UI.
|
|
|
+ *
|
|
|
+ * @returns {Promise}
|
|
|
+ */
|
|
|
+ destroy() {
|
|
|
+ this.updateEditorElement();
|
|
|
+ this._elementReplacer.restore();
|
|
|
+
|
|
|
+ return this.ui.destroy()
|
|
|
+ .then( () => super.destroy() );
|
|
|
+ }
|
|
|
+
|
|
|
+ _createUI() {
|
|
|
+ const editorUI = new BoxedEditorUI( this );
|
|
|
+ const editorUIView = new BoxedEditorUIView( editorUI.viewModel, this.locale );
|
|
|
+
|
|
|
+ editorUI.view = editorUIView;
|
|
|
+
|
|
|
+ this.ui = editorUI;
|
|
|
+
|
|
|
+ this._createToolbar();
|
|
|
+ this._createEditableUI();
|
|
|
+
|
|
|
+ this._elementReplacer.replace( this.element, this.ui.view.element );
|
|
|
+
|
|
|
+ return Promise.resolve();
|
|
|
+ }
|
|
|
+
|
|
|
+ _initUI() {
|
|
|
+ this._toolbar.addButtons( this.config.toolbar );
|
|
|
+
|
|
|
+ return this.ui.init()
|
|
|
+ .then( () => this.editing.view.attachDomRoot( this._editableUI.view.element ) );
|
|
|
+ }
|
|
|
+
|
|
|
+ static create( element, config ) {
|
|
|
+ const editor = new ClassicEditor( element, config );
|
|
|
+
|
|
|
+ return editor._createUI()
|
|
|
+ .then( () => editor.initPlugins() )
|
|
|
+ .then( () => editor._initUI() )
|
|
|
+ .then( () => editor.loadDataFromEditorElement() )
|
|
|
+ .then( () => editor );
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Creates editor sticky toolbar and fills it with children using the configuration.
|
|
|
+ *
|
|
|
+ * @protected
|
|
|
+ */
|
|
|
+ _createToolbar() {
|
|
|
+ // Note: StickyToolbar and StickyToolbarView share the same model. It may change in the future.
|
|
|
+ const toolbarModel = new Model();
|
|
|
+ const toolbarView = new StickyToolbarView( toolbarModel, this.locale );
|
|
|
+ const toolbar = new StickyToolbar( toolbarModel, toolbarView, this );
|
|
|
+
|
|
|
+ this.ui.add( 'top', toolbar );
|
|
|
+
|
|
|
+ this._toolbar = toolbar;
|
|
|
+ }
|
|
|
+
|
|
|
+ _createEditableUI() {
|
|
|
+ const editable = this.editing.view.getRoot();
|
|
|
+ const editableUI = new EditableUI( this, editable );
|
|
|
+ const editableUIView = new InlineEditableUIView( editableUI.viewModel, this.locale );
|
|
|
+
|
|
|
+ editableUI.view = editableUIView;
|
|
|
+
|
|
|
+ this.ui.add( 'main', editableUI );
|
|
|
+
|
|
|
+ this._editableUI = editableUI;
|
|
|
+ }
|
|
|
+}
|