How to render/show Quill raw HTML in vuejs

Question

I have quill editor in vuejs app. I save raw HTML generated by Quill directly to Database (i.e. no cleaning at all). When I fetch it from the backend, text and all styling are shown correctly (i.e. if the text was saved with color it is rendered with the same color, bold is bold etc). But text alignment is not shown correctly.

I am using v-html to show content but text alignment is not rendered.

Basically, I want to have text alignment. This is achieved if I inject (I don't want the user to modify the text) the text into quill editor, but I want to show raw content to normal HTML (i.e. vue component). On digging deep I found, it uses classes as ql-align-right, ql-align-center. So, I tried to explicitly add styling for these classes in styles still no results.

Code snippet

my homeComponent.vue

<template>
  <div class="cell medium-8 large-6 columns">
    <div class="blog-post" v-for="feed in feedArray" :key="feed.id">
      <h3>
        <router-link
          :to="`article/${feed.post_uniqueidentity}`"
          class="heading-link"
        >
          {{ feed.post_head }}
        </router-link>
      </h3>
      <small>{{
        moment(feed.post_timestamp).format("dddd, MMMM Do YYYY")
      }}</small>
      <div class="postBody-simple" v-html="feed.post_body"></div>
    </div>
    <div
      v-if="feedArray.length"
      v-observe-visibility="HandledScrollEvent"
    ></div>
  </div>
</template>
<script>

// ignore from now on...

import moment from "moment";
import { mapGetters, mapActions } from "vuex";
import "../assets/css/bootstrap-icons-1.5.0/bootstrap-icons.css";
import { ObserveVisibility } from "vue-observe-visibility";

export default {
  name: "feeds",
  metaInfo: {
    title: "Home",
  },
  directives: {
    ObserveVisibility,
  },
  data() {
    return {
      next: null,
      previous: 1,
      feedArray: [],
    };
  },
  computed: { ...mapGetters(["feedStore"]) },
  methods: {
    ...mapActions([
      "fetchFeed",
      "fetchFeedPagination",
    ]),
    async contentLoader(pageNumber) {
      var localArrayData = await this.fetchFeedPagination(pageNumber);
      this.feedArray.push(...localArrayData.results);
      this.next = localArrayData.next;
    },
    HandledScrollEvent(isVisible) {
      if (!isVisible) {
        return;
      }
      if (this.next) {
        this.contentLoader(this.next);
      }
    },
  },
  async created() {
    this.moment = moment;
    let rawResponse = await this.fetchFeed();
    let isNextPageAvailable = rawResponse.next;
    let isPreviousPageAvailable = rawResponse.previous;
    if (isNextPageAvailable) {
      this.next = isNextPageAvailable;
    }
    this.previous = isPreviousPageAvailable;
    this.feedArray.push(...rawResponse.results);
  },
};
</script>

Frontend

vue-observe-visibility: 1.0.0,

vue-quill-editor: 3.0.6,

vue-router: 3.2.0,

vuex: 3.4.0

Backend

Django: 3.0.5

django-cors-headers: 3.7.0

djangorestframework: 3.12.4

psycopg2: 2.9.1

Database: PostgreSQL

This is also tested without any styling, still not getting expected results.

IVO GELOV · Accepted Answer · 2021-08-13 09:01:08Z

1

As shown in the README on Github - you should import the proper CSS stylesheets:

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

These stylesheets are required anywhere you need your HTML content to be rendered - because Quill by default prefers CSS classes instead of inline styles. You can customize this behavior by using attributors as explained in the manual

var ColorClass = Quill.import('attributors/class/color');
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(ColorClass, true);
Quill.register(SizeStyle, true);

// Initialize as you would normally
var quill = new Quill('#editor', {
  modules: {
    toolbar: true
  },
  theme: 'snow'
});

answered Aug 13, 2021 at 9:01

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render/show Quill raw HTML in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related