I am creating a site where admins on the site will routinely post articles (much like a blog). I as an admin can write a basic HTML document easily, but the other admins are not at all familiar with HTML.

I have a form that they will use to publish their articles with author, title, and content fields. I am currently taking the 'content' field and displaying it as HTML after the form is submitted. To help the other users I have added buttons that say "header", "paragraph", "image", and "line break". When these buttons are clicked I would like to add html tags to the existing field (usually already filled with article text). 

The idea is this:

I click the paragraph button and my field shows this: 
 "`<p>type here</p>`".
I then type the paragraph and go to a new line. I decide to add a sub heading after it and click the heading button: 

```
<p>I replaced the text</p>
<h3>type sub-heading here</h3>

```

I don't want the button to create a new input or add to the form in any way. I also don't want it to replace or reset the text that is there, but simply add text where the cursor is located. I've found plenty of methods to add form fields, replace them, hide them, etc, but can't dig up any posts about editing existing text with a button.

Anyone know how I can do this? I am using angular 2 as a framework, so any solution that fits with it (javascript, typescript, angular 2 data binding, etc) will work.

Here is my HTML:

```
<div class="edit-article">
  <h2 *ngIf="isEdit">Edit an Article</h2>
  <h2 *ngIf="!isEdit">Add an Article</h2>
  <div class="input-group">
    <label for="title">Title</label>
    <input mdInput id="title" type="text" [(ngModel)]="title">

    <label for="author">Author</label>
    <input mdInput id="author" type="text" [(ngModel)]="author">

    <label for="article-content">Content</label>
    <input mdInput id="article-content" type="textarea" class="multi-line-input" [(ngModel)]="content">
  </div>
  <div class="button-group left">
    <button class="button secondary" (click)='onAddHeader()'>Header</button>
    <button class="button secondary" (click)='onAddParagraph()'>Paragraph</button>
    <button class="button secondary" (click)='onAddImage()'>Image</button>
  </div>
  <div class="button-group right">
    <button class="button primary" (click)="onSaveArticle()">Save</button>

```

TS file:

```
export class ArticleEditComponent {
  isEdit = false;

  public title: string;
  public author: string;
  public content: string;

  constructor(
    public dialogRef: MdDialogRef<any>, @Inject(MD_DIALOG_DATA) private dialogData: any,
    public afAuth: AngularFireAuth, public afDB: AngularFireDatabase,
    public articleService: ArticleService) {
  }

  onSaveArticle() {
    this.articleService.createArticle(new Article(
    this.title, this.author, this.content));
  }

onAddHeader(){
    document.getElementById("article-content").innerText += '<h3></h3>';
    console.log('running header function');
  }

  onAddImage(){
    document.getElementById("article-content").innerText += 'add image tag';
    console.log('running header function');
  }

  onAddParagraph(){
    document.getElementById("article-content").innerText += '<p></p>';
    console.log('running header function');
  }

```