cssangularngx-quill

Binding html data from quill editor is not displaying as expected in Angular 2^

I am trying to integrate quill editor in Angular application. Here I am using ngx-quill npm module. My issue is when I am using Blockquote, Code block, those are not displaying as expected when I am binding it using innerHtml

Please have a look into the below attachment.

enter image description here

here are the styles that are added in the angular.json

 "styles": [
          "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
          "src/styles.scss",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/quill/dist/quill.bubble.css",
          "./node_modules/quill/dist/quill.snow.css",
          "./node_modules/quill-emoji/dist/quill-emoji.css",
          "./node_modules/quill-mention/dist/quill.mention.min.css"
        ],

Can someone help me out.

Thanks in advance.

Solution

  • You will need to make your own CSS classes to style the output. Quill's CSS styles are scoped to the editor. If you want all code blocks to be styled that way, or just particular ones styled that way based on a class name, it's up to you.

    If you right click on the code in the editor and inspect element, chrome will show you the CSS styles applied to that object in the editor.

    chrome inspector example

    For the code / pre example its this:

    .ql-snow .ql-editor pre.ql-syntax {
    background-color: #23241f;
    color: #f8f8f2;
    overflow: visible;
}

    If you want to re-use all of the Quill Styles, you can wrap your div that you are setting the innerHtml on, like this. I can't guarantee that quill will output the same exact classes for the HTML output, but for the case of pre.ql-syntax it seems like it does. https://stackblitz.com/edit/ngx-quill-example-mkuhbp?file=src%2Fapp%2Fapp.component.html

      <div class="ql-snow">
    <div class="ql-editor" [innerHtml]="htmlText"></div>
  </div>