Why underline html is a -span- and not -u- ?

[Ezequiel Bertran]

HI,

When I use the underline option from the toolbar it adds a html code like this one: "<span style="text-decoration: underline;">text</span>". I expected to see the html tag for underline: <u>

Why is doing that? In my particular case is affecting me because I don't allow "span" elements in the result text and then it's removing the added underline.

There is a possible solution for my case or should I replace <span> with <u> manually?

thanks

[Gunasekar Kuppusamy]

Hi Ezequiel,

Greetings from Syncfusion support.

We have validated your reported query "When I use the underline option from the toolbar it adds a html code like this one: "<span style="text-decoration: underline;">text</span>". I expected to see the html tag for underline: <u>"

By default RichTextEditor behavior, we have used the span elements for applying the inline styles but you can get the RichTextEditor value by converted span tag to underline tags.

We have prepared a sample for your reference. In this sample, we have changed span elements to underline elements manually.

Code snippets:
app.component.ts

public OnClick(e) {

    var value = this.replaceSpanToU(this.rteObj.getHtml());

    alert(value);

  }

  public replaceSpanToU(input) {

    return input.replace(

      /\<span style\=\"text-decoration\: underline\;\"\>(.*?)\<\/span\>/g,

      function(matched, index) {

        return '<u>' + index + '</u>';

      }

    );

  }

Sample: https://stackblitz.com/edit/angular-bevobh-rc5tsc?file=app.component.ts

please check the sample and let us know if the solution meets your requirement.

Regards,

Gunasekar

[gugal]

Hi syncfusion,

while saving a text from RTE, html tags are automatically added.

I'm also adding 1 snap for better understanding.

Caption

if you see here some <p> and <br> tags are added. How we can save text without html tags?

[Vinitha Jeyakumar]

Hi Gugal,

If you want to get and save the value of the Rich Text Editor without HTML tags, you can use the getText method which returns the text content as string.

Code snippet:

 public BtnClick = (): void => {

    console.log(this.rteObj.getText());

  };

Sample: https://stackblitz.com/edit/angular-qqzkcj?file=app.component.html,app.component.ts

API Link: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#gettext

Regards,

Vinitha