Procházet zdrojové kódy

Modified setEditableElement method so may extend existing element definition. Defined ck-editor__editable and ck-editor__editable_inline classes.

Aleksander Nowodzinski před 9 roky
rodič
revize
69f654a6fe

+ 14 - 7
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -34,8 +34,9 @@ export default class EditableUIView extends View {
 	 * Sets the {@link #editableElement} property and applies necessary bindings to it.
 	 *
 	 * @param {HTMLElement} editableElement
+	 * @param {ui.TemplateDefinition} def
 	 */
-	setEditableElement( editableElement ) {
+	setEditableElement( editableElement, def = { attributes: {} } ) {
 		const bind = this.attributeBinder;
 
 		if ( this.editableElement ) {
@@ -46,11 +47,17 @@ export default class EditableUIView extends View {
 
 		this.editableElement = editableElement;
 
-		this.applyTemplateToElement( editableElement, {
-			attributes: {
-				contenteditable: bind.to( 'isEditable' ),
-				class: [ bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' ) ]
-			}
-		} );
+		if ( !def.attributes.class ) {
+			def.attributes.class = [];
+		}
+
+		def.attributes.class.push(
+			'ck-editor__editable',
+			bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' )
+		);
+
+		def.attributes.contenteditable = bind.to( 'isEditable' );
+
+		this.applyTemplateToElement( editableElement, def );
 	}
 }

+ 6 - 7
packages/ckeditor5-ui/src/editableui/inline/inlineeditableuiview.js

@@ -14,19 +14,18 @@ export default class InlineEditableView extends EditableUIView {
 		if ( editableElement ) {
 			this.element = editableElement;
 		} else {
-			const bind = this.attributeBinder;
-
 			this.template = {
-				tag: 'div',
-				attributes: {
-					contentEditable: bind.to( 'isEditable' )
-				}
+				tag: 'div'
 			};
 		}
 	}
 
 	init() {
-		this.setEditableElement( this.element );
+		this.setEditableElement( this.element, {
+			attributes: {
+				class: [ 'ck-editor__editable_inline' ]
+			},
+		} );
 
 		super.init();
 	}