How to use the @ckeditor/ckeditor5-ui/src/template function in @ckeditor/ckeditor5-ui

focusPrevious: 'shift + tab',

        // Navigate form fields forwards using the Tab key.
        focusNext: 'tab'
      }
    } );

    Template.extend( this.saveButtonView.template, {
      attributes: {
        class: [
          'ck-button-action'
        ]
      }
    } );

    this.template = new Template( {
      tag: 'form',

      attributes: {
        class: [
          'cke-formId-form',
        ],

        // https://github.com/ckeditor/ckeditor5-image/issues/40
        tabindex: '-1'
      },

      children: [
        this.formIdInput,
        {
          tag: 'div',

focusPrevious: 'shift + tab',

        // Navigate form fields forwards using the Tab key.
        focusNext: 'tab'
      }
    } );

    Template.extend( this.saveButtonView.template, {
      attributes: {
        class: [
          'ck-button-action'
        ]
      }
    } );

    this.template = new Template( {
      tag: 'form',

      attributes: {
        class: [
          'cke-text-alternative-form',
        ],

        // https://github.com/ckeditor/ckeditor5-image/issues/40
        tabindex: '-1'
      },

      children: [
        this.labeledInput,
        {
          tag: 'div',

* @observable
		 * @member {String} #value
		 */
		this.set( 'value' );

		/**
		 * The `id` attribute of the textarea (i.e. to pair with a `<label>` element).
		 *
		 * @observable
		 * @member {String} #id
		 */
		this.set( 'id' );

		const bind = this.bindTemplate;

		this.template = new Template( {
			tag: 'textarea',
			attributes: {
				class: [
					'ck-textarea',
				],
				id: bind.to( 'id' )
			}
		} );

		// Note: `value` cannot be an HTML attribute, because it doesn't change HTMLInputElement value once changed.
		this.on( 'change:value', ( evt, propertyName, value ) =&gt; this.element.value = value || '' );
	}
</label>

* @observable
     * @member {String} #placeholder
     */
    this.set( 'placeholder' );

    /**
     * Controls whether the input view is in read-only mode.
     *
     * @observable
     * @member {Boolean} #isReadOnly
     */
    this.set( 'isReadOnly', false );

    const bind = this.bindTemplate;

    this.template = new Template( {
      tag: 'textarea',
      attributes: {
        // type: 'text',
        class: [
          'ck-textarea'
        ],
        id: bind.to( 'id' ),
        placeholder: bind.to( 'placeholder' ),
        readonly: bind.to( 'isReadOnly' )
      }
    } );

    // Note: `value` cannot be an HTML attribute, because it doesn't change HTMLInputElement value once changed.
    this.on( 'change:value', ( evt, propertyName, value ) => {
      this.element.value = value || '';
    } );

.then( newEditor => {
			editor = newEditor;
			doc = editor.document;
			editingView = editor.editing.view;
			plugin = editor.plugins.get( ImageBalloon );

			view = new View();
			view.template = new Template( { tag: 'div' } );
			view.init();
		} );
	} );

_getPlaceholderHtml() {
		const tooltip = new TooltipView();
		const icon = new IconView();

		tooltip.text = this._t( 'Open media in new tab' );
		icon.content = mediaPlaceholderIcon;
		icon.viewBox = mediaPlaceholderIconViewBox;

		const placeholder = new Template( {
			tag: 'div',
			attributes: {
				class: 'ck ck-reset_all ck-media__placeholder'
			},
			children: [
				{
					tag: 'div',
					attributes: {
						class: 'ck-media__placeholder__icon'
					},
					children: [ icon ]
				},
				{
					tag: 'a',
					attributes: {
						class: 'ck-media__placeholder__url',