Xhtml validation in Angular Rich text editor component

27 Sep 20232 minutes to read

The editor provides an option to validate the source content of the Rich Text Editor against the XHTML standard using the ’enableXhtml’ property. When you enter or modify content in the editor, it continuously checks the XHTML source content and removes elements and attributes that are not valid.

The editor checks the following settings on validation:

Attributes

  • Must be specified in lowercase.
  • Proper use of quotation marks around the attributes.
  • Must be valid attributes for corresponding HTML element.
  • All the required attributes must be included in the HTML element.

HTML Elements

  • Must be in lowercase.
  • All opening tags must be closed.
  • Allows only the valid HTML elements.
  • Elements must be properly nested.
  • All elements must have one root element.
  • Should not use inline elements inside the block elements.
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'app-root',
    template: `<ejs-richtexteditor id='defaultRTE' [enableXhtml] = 'xhtml'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent  {
    public xhtml = true;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        RichTextEditorAllModule,
        DialogModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);