html - Angular- text editor is not working using Javascript

Question

I am using angular 8... I am trying Rich text editor (i.e wysiwyg editor ) My Html is

<div onload="enableEditMode()">
    <div>
      <button onclick="Edit('bold')" title="bold"><i class="fa fa-bold"></i></button>
      <button onclick="Edit('italic')" title="italic"><i class="fa fa-italic"></i></button>
      <button onclick="Edit('underline')" title="underline"><i class="fa fa-underline"></i></button>
      <button onclick="Edit('strikeThrough')" title="strikeThrough"><i class="fa fa-strikethrough"></i></button>
      <button onclick="Edit('justifyLeft')" title="Align Left"><i class="fa fa-align-left"></i></button>
      <button onclick="Edit('justifyCenter')" title="Align Center"><i class="fa fa-align-center"></i></button>
      <button onclick="Edit('justifyFull')" title="justify"><i class="fa fa-align-justify"></i></button>
      <button onclick="Edit('cut')" title="cut"><i class="fa fa-cut"></i></button>
      <button onclick="Edit('copy')" title="Copy"><i class="fa fa-copy"></i></button>
      <button onclick="Edit('indent')" title="text-indent"><i class="fa fa-indent"></i></button>
      <button onclick="Edit('outdent')" title="text outdent"><i class="fa fa-outdent"></i></button>
      <button onclick="Edit('subscript')" title="subscript"><i class="fa fa-subscript"></i></button>
      <button onclick="Edit('superscript')" title="subscript"><i class="fa fa-superscript"></i></button>
      <button onclick="Edit('undo')" title="undo"><i class="fa fa-undo"></i></button>
      <button onclick="Edit('redo')" title="redo"><i class="fa fa-redo"></i></button>
      <button onclick="Edit('insertUnorderedList')" title="unordered list"><i class="fa fa-list-ul"></i></button>
      <button onclick="Edit('insertOrderedList')" title="ordered list"><i class="fa fa-list-ol"></i></button>
      <button onclick="Edit('insertParagraph')"><i class="fa fa-paragraph"></i></button>
      <select onchange="execVal('formatBlock',this.value)">
          <option value="H1">H1</option>
          <option value="H2">H2</option>
          <option value="H3">H3</option>
          <option value="H4">H4</option>
          <option value="H5">H5</option>
          <option value="H6">H6</option>
        </select>
      <br>
      <button onclick="Edit('insertHorizontalRule')" title="insert Horizontal Rule">insert Horizontal Rule</button>
      <button onclick="Edit('createLink',prompt('Enter a URL,http://'))"><i class="fa fa-link"></i></button>
      <button onclick="Edit('unlink')"><i class="fa fa-unlink"></i></button>
      <select onchange="execVal('fontName',this.value)">
          <option value="Arial">Arial</option>
          <option value="Comic Sans MS">Comic Sans MS</option>
          <option value="Courier">Courier</option>
          <option value="Georgia">Georgia</option>
          <option value="Tahoma">Tahoma</option>
          <option value="Times New Roman">Times New Roman</option>
          <option value="Verdana">Verdana</option>
        </select>
      <select onchange="execVal('fontSize',this.value)" title="font size">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
        </select>Font Color<input type="color" onchange="execVal('foreColor',this.value)" /> Highlight<input type="color" onchange="execVal('hiliteColor',this.value)" />
      <button onclic="Edit('SelectAll')">Select All</button>
    </div>
    <div contenteditable="" name="richTextField" style="width:80%;height: 80%;margin:auto;display: block;">
        
    </div>
      </div>

my component.ts is

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import {isBoolean} from 'util';
import { Router } from '@angular/router';
import { ViewChild } from '@angular/core';
import { debounceTime, distinctUntilChanged, tap, filter, switchMap, finalize, takeUntil, map } from 'rxjs/operators';
import { MatAutocompleteSelectedEvent, MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { Observable, from, fromEvent } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';


@Component({
  selector: 'app-text-editor',
  templateUrl: './text-editor.component.html',
  styleUrls: ['./text-editor.component.css']
})
export class TextEditorComponent implements OnInit {
  richTextField:any


  
  constructor( private sanitizer:DomSanitizer ) { }

  ngOnInit(): void {
    
  }


  enableEditMode() {
    this.richTextField.document.designMode = "on";
  }
   Edit(command) {
    this.richTextField.document.execCommand(command, false, null);
  }
   execVal(command, value) {
    this.richTextField.document.execCommand(command, false, value);
  }

}

I am trying rich text editor but it is not working.. Is that possible in this way or It will not work any suggestions plz? I'm trying in this way using javascript It's not showing any error .. and its not working ... Is there any error or any method....

Answer 1

等待大神答复