'How to omit the Quill editor format classes from the HTML text it produces?

I am using the Quill text editor from Primefaces to write html text. In the editor the user can set both the text alignment and direction among other things.

When the user sets the alignment of the html text to the right and the direction to rtl Quill will add the classes ql-align-right and ql-direction-rtl to the <p> element that envelops the text.

The safe HTML validator in the backend does not allow the html elements to have the class attribute so the presence of these classes always cause the validation to fail. Is there a way to let Quill return the HTML text that it produced without those two classes in it?

Right now i'm removing the class definition manually before sending it to the backend but i feel that's a bit cumbersome. Here's the code i have so far:

<p-editor #editor [(ngModel)]="commentText" [style]="{'height':'320px'}" [formats]="formats" (onTextChange)="emitTextChange($event)">
    <p-header>
        <span class="ql-formats">
         <button class="ql-bold" aria-label="Bold"></button>
         <button class="ql-italic" aria-label="Italic"></button>
         <button class="ql-blockquote" aria-label="Blockquote"></button>
         <button class="ql-link" aria-label="Link"></button>
         <button *ngIf="allowEmbeddedImages" class="ql-image" aria-label="Image"></button>
         <select title="Text alignment" class="ql-align" >
            <option selected>Left</option>
            <option value="center" label="Center"></option>
            <option value="right" label="Right"></option>
            <option value="justify" label="Justify"></option>
          </select>
          <button class="ql-direction" value="rtl"></button>
          <button class="ql-list" value="ordered"></button>
          <button class="ql-list" value="bullet"></button>
          <button class="ql-script" value="super"></button>
          <button class="ql-script" value="sub"></button>
        </span>
     </p-header>
</p-editor>

Typescript class

  @ViewChild('editor') textEditor;
    formats:string[] = ['bold', 'italic', 'blockquote', 'link', 'align', 'list', 'direction', 'script'];
    
      emitTextChange(event:any){
        if(this.subject && new Set([ObjectType.JOURNAL, ObjectType.JOURNAL_ENTRY, ObjectType.USER, ObjectType.CROP_VARIETY]).has(this.subjectType)){
            this.subject.content = event.htmlValue; 
            if(this.textEditorLanguage.rightToLeft){
              this.subject.content = this.subject.content.replace("ql-align-right ql-direction-rtl","");
              this.subject.content = this.subject.content.replace(`class=""`,"");
            }
            this.subjectSubmit.emit(this.subject);
        }
      }

//The method used to programmatically sets the alignment to rtl in case the selected language is written from right to left (arabic, hebrew, etc).
  private changeTextDirection(language: Language){
    setTimeout(()=>{
        if(language.rightToLeft){
          if(this.subject && this.subject.content && this.subject.content.length > 0){
            this.textEditor.writeValue(this.subject.content); 
          }
            this.textEditor.getQuill().format('align', 'right');
            this.textEditor.getQuill().format('direction', 'rtl');
        }
        else{ 
            this.textEditor.getQuill().format('direction', undefined);
            this.textEditor.getQuill().format('align', undefined);     
        }
      },1);
  }    

Right now i'm using the htmlValue event property to get the current html text from the editor. But this text always contains those two undesired classes. Is there another property i can use that returns the html text without the quill format classes?

Thank you



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source