Is there a way to get text from the ngx-editor?

Question

I am aware that HTML can be retrieved using [(ngModel)]="htmlContent", but is it possible to get just the text? Thanks.

Example:

This text is bold. This is italics

html content: <b>This text is bold</b>.<i>This is italics</i>

text content: This text is bold. This is italics

Raised github issue

If you could, you would lose any formatting. What is it you're looking to achieve? — user184994, Jul 08 '18 at 06:15
@user184994 I know. I am working on a blog and want to save both, `text` and `html` of the created blog post in the database. I am saving `text` for the purposes of querying. Querying on `html` would not be accurate. — dasfdsa, Jul 08 '18 at 06:18

score 4 · Answer 1 · answered Jul 08 '18 at 06:36

You can parse it with the DOMParser class, and then just use the innerText property.

Assuming you have the HTML in a variable called html, it would be

let html = '<b>This text is bold</b>.<i>This is italics</i>';

var oParser = new DOMParser();
var oDOM = oParser.parseFromString(html, "text/html");
var text = oDOM.body.innerText;

console.log(text);

More about the parser can be found at https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML

It is printing [object Object] – J4GD33P 51NGH May 29 '19 at 06:39 — J4GD33P 51NGH, May 29 '19 at 06:39

score 2 · Answer 2 · answered Jan 21 '19 at 14:54

2

yes!just use innerHTML property by following:

<div [innerHTML]="model.property"></div>

answered Jan 21 '19 at 14:54

MoHaMMaD Hedayati

41
2

score 0 · Answer 3 · answered Apr 20 '22 at 16:21

I think you are talking about this

1.-HTML file add ngModelChange:

<div class="NgxEditor__Wrapper">
     <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
     <ngx-editor
         [editor]="editor"
         [(ngModel)]="html"
         [disabled]="false"
         [placeholder]="'Ingresa el texto...'"
         (ngModelChange)="editorChange($event)"
      ></ngx-editor>
</div>

2.-Componente file.

2.1.- Import the class toHtml:

import { Editor, toHTML } from 'ngx-editor';

2.2.-Create the function to catch the event:

  editorChange(event: any){
    const htmlTexEditor = toHTML(this.html);
    console.log(htmlTexEditor);
  }

score 0 · Answer 4 · answered May 09 '22 at 14:00

0

extractContent(htmlCode: string) {
        let span = document.createElement('span');
        span.innerHTML = htmlCode;
        return span.textContent || span.innerText;
    };

this might be useful to someone

answered May 09 '22 at 14:00

neekheel

98
2
18

Is there a way to get text from the ngx-editor?

4 Answers4