浏览代码

DOMConverter is using UIElement.render method.

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

+ 8 - 0
packages/ckeditor5-engine/src/view/domconverter.js

@@ -199,6 +199,14 @@ export default class DomConverter {
 				if ( options.bind ) {
 					this.bindDocumentFragments( domElement, viewNode );
 				}
+			} else if ( viewNode.is( 'uiElement' ) ) {
+				// UIElement has it's own render() method.
+				// https://github.com/ckeditor/ckeditor5-engine/issues/799
+				domElement = viewNode.render( domDocument );
+
+				if ( options.bind ) {
+					this.bindElements( domElement, viewNode );
+				}
 			} else {
 				// Create DOM element.
 				domElement = domDocument.createElement( viewNode.name );

+ 10 - 0
packages/ckeditor5-engine/src/view/uielement.js

@@ -63,6 +63,16 @@ export default class UIElement extends Element {
 			throw new CKEditorError( 'view-uielement-cannot-add: Cannot add child nodes to UIElement instance.' );
 		}
 	}
+
+	render( domDocument ) {
+		const domElement = domDocument.createElement( this.name );
+
+		for ( const key of this.getAttributeKeys() ) {
+			domElement.setAttribute( key, this.getAttribute( key ) );
+		}
+
+		return domElement;
+	}
 }
 
 // Returns `null` because block filler is not needed for UIElements.

+ 25 - 0
packages/ckeditor5-engine/tests/view/domconverter/view-to-dom.js

@@ -8,6 +8,7 @@
 import ViewText from '../../../src/view/text';
 import ViewElement from '../../../src/view/element';
 import ViewPosition from '../../../src/view/position';
+import ViewUIElement from '../../../src/view/uielement';
 import ViewContainerElement from '../../../src/view/containerelement';
 import ViewAttributeElement from '../../../src/view/attributeelement';
 import DomConverter from '../../../src/view/domconverter';
@@ -179,6 +180,30 @@ describe( 'DomConverter', () => {
 			expect( domTextNode.data ).to.equal( 'foo' );
 		} );
 
+		it( 'should create DOM element from UIElement', () => {
+			const uiElement = new ViewUIElement( 'div' );
+			const domElement = converter.viewToDom( uiElement, document );
+
+			expect( domElement ).to.be.instanceOf( HTMLElement );
+		} );
+
+		it( 'should create DOM structure from UIElement', () => {
+			class MyUIElement extends ViewUIElement {
+				render( domDocument ) {
+					const root = super.render( domDocument );
+					root.innerHTML = '<span>foo bar baz</span>';
+
+					return root;
+				}
+			}
+
+			const myElement = new MyUIElement( 'div' );
+			const domElement = converter.viewToDom( myElement, document );
+
+			expect( domElement ).to.be.instanceOf( HTMLElement );
+			expect( domElement.innerHTML ).to.equal( '<span>foo bar baz</span>' );
+		} );
+
 		describe( 'it should convert spaces to &nbsp;', () => {
 			it( 'at the beginning of each container element', () => {
 				const viewDiv = new ViewContainerElement( 'div', null, [