浏览代码

Added placeholder utility initial implementation and manual test.

Szymon Kupś 8 年之前
父节点
当前提交
94d5c01604

+ 1 - 0
packages/ckeditor5-engine/src/controller/editingcontroller.js

@@ -23,6 +23,7 @@ import {
 } from '../conversion/model-selection-to-view-converters';
 
 import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
+import '../../theme/theme.scss';
 
 /**
  * Controller for the editing pipeline. The editing pipeline controls {@link ~EditingController#model model} rendering,

+ 57 - 0
packages/ckeditor5-engine/src/view/placeholder.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module engine/view/placeholder
+ */
+
+const CSS_CLASS = 'ck-placeholder';
+const DATA_ATTRIBUTE = 'data-placeholder';
+
+/**
+ * Attaches placeholder to provided element and updates it's visibility.
+ *
+ * @param {module:engine/view/document~Document} document View document containing given element.
+ * @param {module:engine/view/element~Element} element Element to attach placeholder to.
+ * @param {String} [placeholderText] Placeholder text, if not provided it will be loaded from placeholder data attribute.
+ */
+export default function attachPlaceholder( document, element, placeholderText ) {
+	element.setAttribute( DATA_ATTRIBUTE, placeholderText );
+
+	// Add/remove placeholder before each rendering.
+	document.on( 'render', () => {
+		updateCSSClass( document, element );
+	}, { priority: 'highest' } );
+
+	// Add checking on focus event separately because for now FocusObserver is not re-rendering view after `focus` event.
+	// Re render the view - see https://github.com/ckeditor/ckeditor5-engine/issues/795.
+	document.on( 'focus', () => {
+		updateCSSClass( document, element );
+
+		document.render();
+	} );
+}
+
+// Updates placeholder class of given element
+//
+// @private
+function updateCSSClass( document, element ) {
+	const viewSelection = document.selection;
+	const anchor = viewSelection.anchor;
+
+	// If element is empty and editor is blurred.
+	if ( !document.isFocused && !element.childCount ) {
+		element.addClass( CSS_CLASS );
+
+		return;
+	}
+
+	// It there are no child elements and selection is not placed inside element.
+	if ( !element.childCount && anchor && anchor.parent !== element ) {
+		element.addClass( CSS_CLASS );
+	} else {
+		element.removeClass( CSS_CLASS );
+	}
+}

+ 1 - 0
packages/ckeditor5-engine/tests/manual/placeholder.html

@@ -0,0 +1 @@
+<div id="editor"><h2></h2><p></p></div>

+ 32 - 0
packages/ckeditor5-engine/tests/manual/placeholder.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
+import Enter from '@ckeditor/ckeditor5-enter/src/enter';
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import attachPlaceholder from '../../src/view/placeholder';
+
+ClassicEditor.create( global.document.querySelector( '#editor' ), {
+	plugins: [ Enter, Typing, Paragraph, Undo, Heading ],
+	toolbar: [ 'headings', 'undo', 'redo' ]
+} )
+.then( editor => {
+	const viewDoc = editor.editing.view;
+	const header = viewDoc.getRoot().getChild( 0 );
+	const paragraph = viewDoc.getRoot().getChild( 1 );
+
+	attachPlaceholder( viewDoc, header, 'Type some header text...' );
+	attachPlaceholder( viewDoc, paragraph, 'Type some paragraph text...' );
+	viewDoc.render();
+} )
+.catch( err => {
+	console.error( err.stack );
+} );

+ 1 - 0
packages/ckeditor5-engine/tests/manual/placeholder.md

@@ -0,0 +1 @@
+### Placeholder creation

+ 8 - 0
packages/ckeditor5-engine/theme/theme.scss

@@ -0,0 +1,8 @@
+// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-placeholder::before {
+	content: attr( data-placeholder );
+	cursor: text;
+	color: #bababa;
+}