angularquillngx-quill

How to implement the style of Quill html output when rendering it in another app?


I'm using quill editor on our B2B and the user can customize his text, and I get back a HTML format of the text.

But when I'm displaying the HTML on the B2C side I don't have the quill editor installed and I don't get all custom style, is there any different solution except installing quill editor ? my HTML looks like this: [innerHtml]="<some HTML from quill editor>

I get the HTML with quill custom class

Like this

I'm expecting this

But getting this


Solution

  • First, you have to include the link to quill's stylesheet in your index.html, as described here.

    Then, you have to wrap your html element where you put the quill html ouput, with an additional <div> with the following clases as described here:

    <div class="ql-container ql-snow" style="border-width: 0;">
      <div class="ql-editor" [innerHTML]="byPassedHTMLString">
      </div>
    </div>
    

    Now you are good to go. Recompile your app and see the magic in action!