Move the service file and try some Quill API

src/app/quill-editor/quill-editor.component.html

@@ -27,6 +27,15 @@
 <div id="quill" #quillContainer></div>
 <div #counter></div>
 
+<h2>Content API</h2>
+<div>
+  <button (click)="deleteText()">Delete Text</button>
+  <button (click)="getContent()">Get Content</button>
+  <button (click)="getContentWithParams()">Get Content with params</button>
+  <button (click)="getLength()">Get Length</button>
+  <button (click)="getText()">Get Text</button>
+
+</div>
 Current State:
 <pre
   >{{ currentState | json }}

src/app/quill-editor/quill-editor.component.ts

@@ -3,7 +3,8 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SafeUrl } from '@angular/platform-browser';
 import { Counter } from '../custom-module';
-import { QuillEditorService } from './quill-editor.service';
+import { QuillEditorService } from '../services/quill-editor.service';
+import { ContentsService } from '../services/contents.service';
 
 interface IImageMeta {
   type: string;
@@ -32,7 +33,10 @@ export class QuillEditorComponent implements AfterViewInit {
     blobUrl: '',
     file: null,
   };
-  constructor(private quillEditorService: QuillEditorService) {}
+  constructor(
+    private quillEditorService: QuillEditorService,
+    private contentService: ContentsService
+  ) {}
   ngAfterViewInit() {
     this.quillEditorService.registerCustomBolt();
     this.initQuillEditor();
@@ -47,14 +51,12 @@ export class QuillEditorComponent implements AfterViewInit {
     this.quillEditorService.quillUpdateSubject$.subscribe({
       next: (changesDelta) => {
         const contents = this.quillEditor.getContents();
-        this.currentState = JSON.stringify(
-          {
-            contents,
-            changes: changesDelta,
-          },
+        (this.currentState = {
+          contents,
+          changes: changesDelta,
+        }),
           null,
-          2
-        );
+          2;
       },
     });
   }
@@ -123,4 +125,24 @@ export class QuillEditorComponent implements AfterViewInit {
   getQuillEditorInstance(): Quill {
     return this.quillEditor!;
   }
+
+  deleteText() {
+    this.contentService.deleteText(this.quillEditor);
+  }
+
+  getContent() {
+    this.contentService.getContent(this.quillEditor);
+  }
+
+  getContentWithParams() {
+    this.contentService.getContentWithParams(this.quillEditor);
+  }
+
+  getLength() {
+    this.contentService.getLength(this.quillEditor);
+  }
+
+  getText() {
+    this.contentService.getText(this.quillEditor);
+  }
 }

src/app/services/contents.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ContentsService } from './contents.service';
+
+describe('ContentService', () => {
+  let service: ContentsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ContentsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/contents.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import Quill from 'quill';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ContentsService {
+  constructor() {}
+
+  deleteText(quill: Quill) {
+    quill.deleteText(4, 6);
+  }
+
+  getContent(quill: Quill) {
+    const content = quill.getContents();
+    console.log(content);
+  }
+
+  getContentWithParams(quill: Quill) {
+    const content = quill.getContents(27);
+    // const content = quill.getContents(27, 5);
+    console.log(content);
+  }
+
+  getLength(quill: Quill) {
+    const length = quill.getLength();
+    console.log(length);
+  }
+
+  getText(quill: Quill) {
+    const text = quill.getText();
+    console.log(text.toString());
+  }
+}