ソースを参照

Draft of the placeholder feature.

Aleksander Nowodzinski 7 年 前
コミット
66153b8b3f

+ 2 - 1
packages/ckeditor5-editor-inline/src/inlineeditor.js

@@ -70,7 +70,8 @@ export default class InlineEditor extends Editor {
 			this.sourceElement = sourceElementOrData;
 		}
 
-		this.ui = new InlineEditorUI( this, new InlineEditorUIView( this.locale, this.sourceElement ) );
+		const view = new InlineEditorUIView( this.locale, this.sourceElement, this.editing.view );
+		this.ui = new InlineEditorUI( this, view );
 
 		attachToForm( this );
 	}

+ 33 - 11
packages/ckeditor5-editor-inline/src/inlineeditorui.js

@@ -10,6 +10,7 @@
 import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
 import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
 import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
+import { attachPlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
 
 /**
  * The inline editor UI class.
@@ -38,9 +39,26 @@ export default class InlineEditorUI extends EditorUI {
 	init() {
 		const editor = this.editor;
 		const view = this.view;
+		const editingView = editor.editing.view;
+
+		// Bind to focusTracker instead of editor.editing.view because otherwise
+		// focused editable styles disappear when view#toolbar is focused.
+		view.editable.bind( 'isFocused' ).to( this.focusTracker );
 
 		view.render();
 
+		editingView.attachDomRoot( view.editableElement );
+
+		const editingRoot = editingView.document.getRoot();
+
+		view.editable.name = editingRoot.rootName;
+
+		editor.on( 'dataReady', () => {
+			view.editable.attachDomRootActions();
+
+			attachPlaceholder( editingView, getPlaceholderElement( editingRoot ), 'Type some text...' );
+		} );
+
 		// Set–up the view#panel.
 		view.panel.bind( 'isVisible' ).to( this.focusTracker, 'isFocused' );
 
@@ -60,25 +78,29 @@ export default class InlineEditorUI extends EditorUI {
 			}
 		} );
 
-		// Setup the editable.
-		const editingRoot = editor.editing.view.document.getRoot();
-		view.editable.bind( 'isReadOnly' ).to( editingRoot );
-
-		// Bind to focusTracker instead of editor.editing.view because otherwise
-		// focused editable styles disappear when view#toolbar is focused.
-		view.editable.bind( 'isFocused' ).to( this.focusTracker );
-		editor.editing.view.attachDomRoot( view.editableElement );
-		view.editable.name = editingRoot.rootName;
-
 		this.focusTracker.add( view.editableElement );
 
 		view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
 
 		enableToolbarKeyboardFocus( {
-			origin: editor.editing.view,
+			origin: editingView,
 			originFocusTracker: this.focusTracker,
 			originKeystrokeHandler: editor.keystrokes,
 			toolbar: view.toolbar
 		} );
 	}
 }
+
+function getPlaceholderElement( viewRoot ) {
+	return () => {
+		if ( viewRoot.childCount === 1 ) {
+			const firstRootChild = viewRoot.getChild( 0 );
+
+			if ( firstRootChild.is( 'p' ) ) {
+				return firstRootChild;
+			}
+		}
+
+		return null;
+	};
+}

+ 2 - 2
packages/ckeditor5-editor-inline/src/inlineeditoruiview.js

@@ -25,7 +25,7 @@ export default class InlineEditorUIView extends EditorUIView {
 	 * @param {HTMLElement} [editableElement] The editable element. If not specified, it will be automatically created by
 	 * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
 	 */
-	constructor( locale, editableElement ) {
+	constructor( locale, editableElement, editingView ) {
 		super( locale );
 
 		/**
@@ -129,7 +129,7 @@ export default class InlineEditorUIView extends EditorUIView {
 		 * @readonly
 		 * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
 		 */
-		this.editable = new InlineEditableUIView( locale, editableElement );
+		this.editable = new InlineEditableUIView( locale, editableElement, editingView );
 	}
 
 	/**

+ 0 - 2
packages/ckeditor5-editor-inline/tests/manual/inlineeditor.html

@@ -4,8 +4,6 @@
 </p>
 
 <div id="editor-1" contenteditable="true" class="custom-class" custom-attr="foo">
-	<h2>Editor 1</h2>
-	<p>This is an editor instance.</p>
 </div>
 
 <div id="editor-2" class="custom-class" custom-attr="foo">

+ 2 - 0
packages/ckeditor5-editor-inline/tests/manual/inlineeditor.js

@@ -63,3 +63,5 @@ function destroyEditors() {
 
 document.getElementById( 'initEditors' ).addEventListener( 'click', initEditors );
 document.getElementById( 'destroyEditors' ).addEventListener( 'click', destroyEditors );
+
+initEditors();