浏览代码

Merge pull request #56 from ckeditor/t/55

t/55: Edge does not render IconManager sprite.
Oskar Wróbel 9 年之前
父节点
当前提交
21a6796cb5

+ 17 - 1
packages/ckeditor5-ui/src/iconmanager/iconmanagerview.js

@@ -34,7 +34,23 @@ export default class IconManagerView extends View {
 	}
 
 	init() {
-		this.element.innerHTML = this.model.sprite;
+		// Note: In MS Edge it's not enough to set:
+		//
+		//		this.element.innerHTML = this.model.sprite;
+		//
+		// because for some reason the browser won't parse the symbols string
+		// properly as svg content. Instead, an explicit parsing is needed (#55).
+		const tmp = document.createElement( 'div' );
+
+		tmp.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg">${ this.model.sprite }</svg>`;
+
+		const symbols = tmp.firstChild.childNodes;
+
+		// Pick symbols from the tmp and put them into icon manager.
+		// Note: MS Edge does not support forEach or Symbol.iterator for NodeList.
+		for ( let i = 0; i < symbols.length; ++i ) {
+			this.element.appendChild( document.importNode( symbols[ i ], true ) );
+		}
 
 		return super.init();
 	}

+ 4 - 6
packages/ckeditor5-ui/tests/iconmanager/iconmanagerview.js

@@ -18,7 +18,7 @@ describe( 'IconManagerView', () => {
 	beforeEach( () => {
 		view = new IconManagerView();
 		model = new Model( {
-			sprite: 'foo'
+			sprite: '<symbol><title>foo</title></symbol>'
 		} );
 
 		return new IconManager( model, view ).init();
@@ -26,16 +26,14 @@ describe( 'IconManagerView', () => {
 
 	describe( 'constructor', () => {
 		it( 'creates element from template', () => {
-			expect( view.element.tagName ).to.be.equal( 'svg' );
-			expect( view.element.getAttribute( 'class' ) ).to.be.equal( 'ck-icon-manager-sprite' );
+			expect( view.element.tagName ).to.equal( 'svg' );
+			expect( view.element.getAttribute( 'class' ) ).to.equal( 'ck-icon-manager-sprite' );
 		} );
 	} );
 
 	describe( 'init', () => {
 		it( 'initializes the sprite', () => {
-			view.init();
-
-			expect( view.element.innerHTML ).to.be.equal( 'foo' );
+			expect( view.element.innerHTML ).to.equal( '<symbol><title>foo</title></symbol>' );
 		} );
 	} );
 } );