Within my Vue.js app, I am utilizing the Quill editor to generate raw HTML content that is saved directly to the database without any cleaning. When fetching this content from the backend, the text and styling are displayed correctly (colors, bolding, etc.), but the text alignment is not rendering as expected.
The issue lies in using v-html to display the content where the text alignment does not appear as intended. My goal is to achieve proper text alignment within the rendered HTML without allowing users to modify the content.
Upon further investigation, it was discovered that Quill uses classes such as ql-align-right and ql-align-center for text alignment. Attempts were made to add explicit styling for these classes with no success.
Code snippet
In 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: 2.6.11,
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
Efforts to address the alignment issue have been made even without additional styling parameters, yet the desired results are not achieved.