CODEWITHSUNDEEP
javascriptangularangular-material
Kuni
Kuni

Reputation: 865

How to edit HTML document with tags in textarea without displaying the tags?

This is something I'm struggling a bit. I have this textarea which can display text with HTML tags. I'm using Angular 10 and angular-material/@latest.

Here's the textarea that displays the HTML document.

<mat-form-field *ngIf="editStatement">
                            <textarea matInput [innerHTML]="statement.statement_description_html"></textarea>
</mat-form-field>

The form looks like this:

enter image description here

What I want is to not display the HTML tags but interpret it and show texts only in the textarea. Is that possible? Some in other SO posts suggests to do

<textarea [innerHTML]="getInnerHTML(name)" cols="" rows=""></textarea>

and in .ts file

getInnerHTML(val){
    return val.replace(/(<([^>]+)>)/ig,'');
  }

The problem with this approach is that it removes all the tags. I want to retain the tags but provide a way to edit the text - somewhat like some of the CMS systems like Wordpress, Wix etc.

Can I do this using Angular?

Upvotes: -1

Views: 327

Answers (1)

Tam&#225;s Katona
Tam&#225;s Katona

Reputation: 833

Maybe you are looking for a "WYSIWYG" HTML Editor (like TinyMCE) that you can embed into your page.

Upvotes: 1

Related Questions