Quill editor html class not able to style in email body

Published

am using angular 10 and included ngx quill editor to show the rich text editor.
when we save the html content into database, it saves with html class type like below:

<li class="ql-indent-2">lbmlkfdnblblfdsb</li>

and when we send an email through our app, we send the above content in the email body but the css class won’t available.so it is not displaying the style.
How can we achieve this in Angular ?

I tried below code and didnt get any luck :

<quill-editor #body name="body" id="body" [(ngModel)]="studyNotification.messageText" (onSelectionChanged)="editorSelectionChanged($event)"
        (onEditorCreated)="editorCreated($event)" [style]="{height: '250px', background: 'white'}">
       
         <div id="toolbar-container"  quill-editor-toolbar>                
            <!-- Text Size  -->
           <span class="ql-formats">
             <select class="ql-font"></select>
             <select class="ql-size"></select>
           </span>
           <!-- Text Formatting  -->
           <span class="ql-formats">
             <button class="ql-bold"></button>
             <button class="ql-italic"></button>
             <button class="ql-underline"></button>
             <button class="ql-strike"></button>
           </span>
           <span class="ql-formats">
             <select class="ql-color"></select>
             <select class="ql-background"></select>
           </span>
             <!-- Subscript/superscript  -->
           <span class="ql-formats">
             <button class="ql-script" value="sub"></button>
             <button class="ql-script" value="super"></button>
           </span>
           <!-- Text Block format -->
              <!-- Header Sizes  -->
           <span class="ql-formats">
             <button class="ql-header" value="1"></button>
             <button class="ql-header" value="2"></button>
             <!-- <button class="ql-blockquote"></button>
             <button class="ql-code-block"></button> -->
           </span>
            <!-- Ordered List / Bullets   -->
             <!--  Indenting -->
           <span class="ql-formats">
             <button class="ql-list" value="ordered"></button>
             <!-- <button class="ql-list" value="bullet"></button> -->
             <button class="ql-indent" value="-1"></button>
             <button class="ql-indent" value="+1"></button>
           </span>
          <span class="ql-formats">
            <!--   <button class="ql-direction" value="rtl"></button> -->
             <select class="ql-align"></select>
           </span>
           <span class="ql-formats">
             <button class="ql-link"></button>
             <button class="ql-image"></button>
             <button class="ql-video"></button>
             <!-- <button class="ql-formula"></button> -->
           </span>
           <!-- <span class="ql-formats">
             <button class="ql-clean"></button>
           </span> -->
         </div>
      
       </quill-editor>

Source: Angular Questions

Published
Categorized as angular, css, ngx-quill, quill Tagged , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq