8
0
فهرست منبع

First batch of changes. Stay tuned.

Piotrek Koszuliński 9 سال پیش
والد
کامیت
452a4e62b3

+ 10 - 17
packages/ckeditor5-editor-classic/src/classiccreator.js

@@ -7,9 +7,6 @@
 
 import StandardCreator from '../creator/standardcreator.js';
 
-import HtmlDataProcessor from '../engine/dataprocessor/htmldataprocessor.js';
-import Editable from '../editable.js';
-
 import { createEditableUI, createEditorUI } from '../ui/creator-utils.js';
 
 import BoxedEditorUI from '../ui/editorui/boxed/boxededitorui.js';
@@ -22,8 +19,6 @@ import Model from '../ui/model.js';
 import StickyToolbar from '../ui/bindings/stickytoolbar.js';
 import StickyToolbarView from '../ui/stickytoolbar/stickytoolbarview.js';
 
-import { imitateFeatures, imitateDestroyFeatures } from './utils/imitatefeatures.js';
-
 /**
  * Classic editor creator using inline editable and sticky toolbar, all
  * enclosed in a boxed UI.
@@ -38,11 +33,10 @@ export default class ClassicCreator extends StandardCreator {
 	 * @param {ckeditor5.Editor} The editor instance.
 	 */
 	constructor( editor ) {
-		super( editor, new HtmlDataProcessor() );
+		super( editor );
 
-		const editableName = editor.firstElementName;
-		editor.editables.add( new Editable( editor, editableName ) );
-		editor.document.createRoot( editableName );
+		editor.document.createRoot();
+		editor.editing.createRoot( 'div' );
 
 		// UI.
 		createEditorUI( editor, BoxedEditorUI, BoxedEditorUIView );
@@ -55,19 +49,20 @@ export default class ClassicCreator extends StandardCreator {
 	 */
 	create() {
 		const editor = this.editor;
-		const editable = editor.editables.get( 0 );
-
-		// Features mock.
-		imitateFeatures( editor );
+		const editorElement = editor.firstElement;
 
 		// UI.
-		this._replaceElement( editor.firstElement, editor.ui.view.element );
+		this._replaceElement( editorElement, editor.ui.view.element );
 		this._createToolbar();
-		editor.ui.add( 'main', createEditableUI( editor, editable, EditableUI, InlineEditableUIView ) );
+
+		const editableUI = createEditableUI( editor, EditableUI, InlineEditableUIView );
+
+		editor.ui.add( 'main', editableUI );
 
 		// Init.
 		return super.create()
 			.then( () => editor.ui.init() )
+			.then( () => editor.editing.view.attachDomRoot( editableUI.view.element ) )
 			// We'll be able to do that much earlier once the loading will be done to the document model,
 			// rather than straight to the editable.
 			.then( () => this.loadDataFromEditorElement() );
@@ -80,8 +75,6 @@ export default class ClassicCreator extends StandardCreator {
 	 * @returns {Promise}
 	 */
 	destroy() {
-		imitateDestroyFeatures();
-
 		this.updateEditorElement();
 
 		super.destroy();

+ 0 - 112
packages/ckeditor5-editor-classic/src/utils/imitatefeatures.js

@@ -1,112 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-import Model from '../../ui/model.js';
-import Button from '../../ui/button/button.js';
-import ButtonView from '../../ui/button/buttonview.js';
-
-import Collection from '/ckeditor5/utils/collection.js';
-
-import ListDropdown from '/ckeditor5/ui/dropdown/list/listdropdown.js';
-import ListDropdownView from '/ckeditor5/ui/dropdown/list/listdropdownview.js';
-
-/**
- * Immitates that some features were loaded and did their job.
- *
- * @param {ckeditor5.Editor} editor
- */
-export function imitateFeatures( editor ) {
-	const t = editor.t;
-
-	const boldModel = new Model( {
-		isEnabled: true,
-		isOn: false,
-		label: t( 'Bold' ),
-		icon: 'bold',
-		iconAlign: 'LEFT'
-	} );
-
-	// Note – most of the contents of this file is ignored, as it's a temporary file that will
-	// be replaced with real features.
-
-	/* istanbul ignore next */
-	boldModel.on( 'execute', () => {
-		/* global console */
-		console.log( 'bold executed' );
-
-		boldModel.isOn = !boldModel.isOn;
-	} );
-
-	editor.ui.featureComponents.add( 'bold', Button, ButtonView, boldModel );
-
-	// -------------------------------------------------------------------------------------------
-
-	/* istanbul ignore next */
-	const italicModel = new Model( {
-		isEnabled: true,
-		isOn: false,
-		label: t( 'Italic' ),
-		icon: 'italic',
-		iconAlign: 'LEFT'
-	} );
-
-	/* istanbul ignore next */
-	italicModel.on( 'execute', () => {
-		/* global console */
-		console.log( 'italic executed' );
-
-		italicModel.isOn = !italicModel.isOn;
-	} );
-
-	editor.ui.featureComponents.add( 'italic', Button, ButtonView, italicModel );
-
-	window.boldModel = boldModel;
-	window.italicModel = italicModel;
-
-	// -------------------------------------------------------------------------------------------
-
-	const fontCollection = new Collection( { idProperty: 'label' } );
-
-	/* istanbul ignore next */
-	[ 'Arial', 'Times New Roman', 'Comic Sans MS', 'Georgia', 'Trebuchet MS', 'Verdana' ]
-		.sort()
-		.forEach( font => {
-			fontCollection.add( new Model( { label: font, style: `font-family: "${ font }"` } ) );
-		} );
-
-	/* istanbul ignore next */
-	const fontListModel = new Model( {
-		items: fontCollection
-	} );
-
-	/* istanbul ignore next */
-	fontListModel.on( 'execute', ( evtInfo, itemModel ) => {
-		/* global console */
-		console.log( 'Font list item executed', itemModel );
-	} );
-
-	/* istanbul ignore next */
-	const fontModel = new Model( {
-		label: t( 'Font' ),
-		isEnabled: true,
-		isOn: false,
-		content: fontListModel
-	} );
-
-	editor.ui.featureComponents.add( 'font', ListDropdown, ListDropdownView, fontModel );
-
-	window.fontCollection = fontCollection;
-	window.fontModel = fontModel;
-	window.Model = Model;
-}
-
-export function imitateDestroyFeatures() {
-	delete window.boldModel;
-	delete window.italicModel;
-	delete window.fontCollection;
-	delete window.Model;
-}

+ 7 - 3
packages/ckeditor5-editor-classic/tests/manual/classiccreator.js

@@ -16,17 +16,18 @@ let editor, editable, observer;
 function initEditor() {
 	CKEDITOR.create( '#editor', {
 		creator: ClassicCreator,
-		toolbar: [ 'bold', 'italic', 'font' ]
+		features: [ 'delete', 'enter', 'typing', 'paragraph', 'undo', 'basic-styles/bold', 'basic-styles/italic' ],
+		toolbar: [ 'bold', 'italic', 'undo', 'redo' ]
 	} )
 	.then( ( newEditor ) => {
 		console.log( 'Editor was initialized', newEditor );
 		console.log( 'You can now play with it using global `editor` and `editable` variables.' );
 
 		window.editor = editor = newEditor;
-		window.editable = editable = editor.editables.get( 0 );
+		window.editable = editable = editor.editing.view.getRoot();
 
 		observer = testUtils.createObserver();
-		observer.observe( 'Editable', editable );
+		observer.observe( 'Editable', editable, [ 'isFocused' ] );
 	} );
 }
 
@@ -45,3 +46,6 @@ function destroyEditor() {
 
 document.getElementById( 'initEditor' ).addEventListener( 'click', initEditor );
 document.getElementById( 'destroyEditor' ).addEventListener( 'click', destroyEditor );
+
+// TODO remove me!
+initEditor();