add insertTextAtCursor

projects/angular-editor-app/src/app/app.component.html

@@ -5,7 +5,7 @@ <h1>Angular Editor</h1>
   <label for="test_input">Test input </label>
   <input id="test_input">
   <br><br>
-  <angular-editor id="editor1" [(ngModel)]="htmlContent1" [config]="config1" (ngModelChange)="onChange($event)"
+  <angular-editor #editorRef id="editor1" [(ngModel)]="htmlContent1" [config]="config1" (ngModelChange)="onChange($event)" (onTextAreaMouseOut) ="onTextAreaMouseOut($event)"
                   (blur)="onBlur($event)"></angular-editor>
   <p class="html">
     HTML Output:  {{ htmlContent1 }}
@@ -19,5 +19,6 @@ <h1>Angular Editor</h1>
   <p>
     Form Status: {{ form.status }}
   </p>
+  <a (click)="insertTextAtCursor()">Insert at cursor</a>
 </div>
 

projects/angular-editor-app/src/app/app.component.ts

@@ -1,102 +1,109 @@
-import {Component, OnInit} from '@angular/core';
-import {AngularEditorConfig} from 'angular-editor';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { AngularEditorConfig } from "angular-editor";
+import { AngularEditorComponent } from "projects/angular-editor/src/public-api";
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
 })
 export class AppComponent implements OnInit {
-  title = 'app';
+  title = "app";
+  @ViewChild("editorRef") editorRef: AngularEditorComponent;
 
   form: FormGroup;
 
-  htmlContent1 = '';
-  htmlContent2 = '';
+  htmlContent1 = "";
+  htmlContent2 = "";
 
   config1: AngularEditorConfig = {
     editable: true,
     spellcheck: true,
-    minHeight: '5rem',
-    maxHeight: '15rem',
-    placeholder: 'Enter text here...',
-    translate: 'no',
+    minHeight: "5rem",
+    maxHeight: "15rem",
+    placeholder: "Enter text here...",
+    translate: "no",
     sanitize: false,
     // toolbarPosition: 'top',
     outline: true,
-    defaultFontName: 'Comic Sans MS',
-    defaultFontSize: '5',
+    defaultFontName: "Comic Sans MS",
+    defaultFontSize: "5",
     // showToolbar: false,
-    defaultParagraphSeparator: 'p',
+    defaultParagraphSeparator: "p",
     customClasses: [
       {
-        name: 'quote',
-        class: 'quote',
+        name: "quote",
+        class: "quote",
       },
       {
-        name: 'redText',
-        class: 'redText'
+        name: "redText",
+        class: "redText",
       },
       {
-        name: 'titleText',
-        class: 'titleText',
-        tag: 'h1',
+        name: "titleText",
+        class: "titleText",
+        tag: "h1",
       },
     ],
-    toolbarHiddenButtons: [
-      ['bold', 'italic'],
-      ['fontSize']
-    ]
+    toolbarHiddenButtons: [["bold", "italic"], ["fontSize"]],
   };
 
   config2: AngularEditorConfig = {
     editable: true,
     spellcheck: true,
-    minHeight: '5rem',
-    maxHeight: '15rem',
-    placeholder: 'Enter text here...',
-    translate: 'no',
+    minHeight: "5rem",
+    maxHeight: "15rem",
+    placeholder: "Enter text here...",
+    translate: "no",
     sanitize: true,
-    toolbarPosition: 'bottom',
-    defaultFontName: 'Comic Sans MS',
-    defaultFontSize: '5',
-    defaultParagraphSeparator: 'p',
+    toolbarPosition: "bottom",
+    defaultFontName: "Comic Sans MS",
+    defaultFontSize: "5",
+    defaultParagraphSeparator: "p",
     customClasses: [
       {
-        name: 'quote',
-        class: 'quote',
+        name: "quote",
+        class: "quote",
       },
       {
-        name: 'redText',
-        class: 'redText'
+        name: "redText",
+        class: "redText",
       },
       {
-        name: 'titleText',
-        class: 'titleText',
-        tag: 'h1',
+        name: "titleText",
+        class: "titleText",
+        tag: "h1",
       },
-    ]
+    ],
   };
 
   constructor(private formBuilder: FormBuilder) {}
 
   ngOnInit() {
     this.form = this.formBuilder.group({
-      signature: ['', Validators.required]
+      signature: ["", Validators.required],
     });
     console.log(this.htmlContent1);
   }
 
   onChange(event) {
-    console.log('changed');
+    console.log("changed");
   }
 
   onBlur(event) {
-    console.log('blur ' + event);
+    console.log("blur " + event);
   }
 
   onChange2(event) {
     console.warn(this.form.value);
   }
+  cnt = 0;
+  insertTextAtCursor() {
+    this.editorRef.insertTextAtCursor(`{${this.cnt}}`);
+    this.cnt++;
+  }
+  onTextAreaMouseOut(event) {
+    console.log(`onTextAreaMouseOut`);
+    console.log(event);
+  }
 }