Angular 6: Insert text at cursor position in angular-editor

angular-editor.component.html

<!-- Page-Title -->

<div class="row mb-3">

    <div class="col-sm-12">

        <div class="page-title-box">

            <div class="btn-group m-0 pull-right">

            </div>

        </div>

    </div>

</div>

<div class="card m-b-30">

    <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm">

        <div class="card-body">

            <div class="row">

                <div class="col-md-12">

                    <h4>Email Templates</h4>

                    <hr>

<div class="row">

<div class="col-md-3">

<div class="form-group">

<label for="pholder" class="bmd-label-floating">PlaceHolder</label>

<select class="form-control" id="pholder" name="ddlPlaceHolder" #ddlPlaceHolder="ngModel"

        (change)="fnSetPlaceHolder(PlaceHolder)" [(ngModel)]="PlaceHolder" value="PlaceHolder">

    <option value="">Select</option>

    <option value="[Name]">Name</option>

    <option value="[Branch]">Branch</option>

    <option value="[RoomNo]">RoomNo</option>

    <option value="[StartTime]">StartTime</option>

    <option value="[EndTime]">EndTime</option>

    <option value="<img  width='100' height='100' src='[ApplicationNumber]'' alt='bar' />">BarCode</option>

    <option value="[verificationCode]">verificationCode</option>

    <option value="[Address]">Address</option>

    <option value="[Email]">Email</option>

    <option value="[Password]">Password</option>

</select>

</div>

</div>

</div>

<div>

<div class="form-group">

<div *ngIf="f.submitted && template.invalid" class="custom-error">

    <div *ngIf="template.errors.required">Email template required</div>

</div>

<angular-editor [config]="config" name="template" [(ngModel)]="Template" #template="ngModel"

                [ngClass]="{ 'is-invalid': f.submitted && template.invalid }" required></angular-editor>

</div>

</div>

                </div>

            </div>

        </div>

    </form>

</div>

angular-editor.component.ts

import { Component, OnInit } from '@angular/core';

import { AngularEditorConfig } from '@kolkov/angular-editor';

declare var $: any;

@Component({

    selector: 'app-angular-editor',

    templateUrl: './angular-editor.component.html',

    styleUrls: ['./angular-editor.component.css']

})

export class AngularEditorComponent implements OnInit {

    model: any = {};

    htmlContent = '';

    public TemplateType = "0"

    BranchId: string;

    LoggedInUserId: any;

    Template: any;

    yrsValue: string;

    PlaceHolder: string = "";

    constructor(

    ) { }

    ngOnInit() {

    }

    config: AngularEditorConfig = {

        editable: true,

        spellcheck: true,

        height: '15rem',

        minHeight: '20rem',

        placeholder: 'Enter text here...',

        translate: 'no',

        customClasses: [

            {

                name: "quote",

                class: "quote",

            },

            {

                name: 'redText',

                class: 'redText'

            },

            {

                name: "titleText",

                class: "titleText",

                tag: "h1",

            },

        ]

    }

    fnSetPlaceHolder(_value: string) {

        var sel = window.getSelection();

        if (sel.getRangeAt && sel.rangeCount) {

            var range = sel.getRangeAt(0);

            range.insertNode(document.createTextNode(_value));

        }

    }

    onSubmit() {

        if (this.TemplateType == "0") {

            return false;

        }

        // here your can add submit button code.

    }

}