Как сделать абзац в форме Django Admin курсивом? Я использую Vue3 Composition API для фронтенда?

Я создаю приложение для блога с текстовым полем body в Django Admin с Vue3 composition API в качестве фронтенда. Я пробовал несколько способов сделать тело (статью) курсивным, но оно отображает только необработанный ввод (например, курсив). Я хочу сделать абзац курсивным в Django Admin с помощью текстового поля body. Как мне это сделать?

Admin.py:

from django.contrib import admin

from blog.models import Profile, Post, Tag
from django import forms
from .widget import ItalicizedTextInput


class PostModelAdminForm(forms.ModelForm):
    body = forms.CharField(widget=ItalicizedTextInput)

    class Meta:
        model = Post
        fields = '__all__'

@admin.register(Profile)
class ProfileAdmin(admin.ModelAdmin):
    model = Profile


@admin.register(Tag)
class TagAdmin(admin.ModelAdmin):
    model = Tag


@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    model = Post
    form = PostModelAdminForm
    

    list_display = (
        "id",
        "title",
        "subtitle",
        "slug",
        "publish_date",
        "published",
        "body"
    )
    list_filter = (
        "published",
        "publish_date",
    )
    list_editable = (
        "title",
        "subtitle",
        "slug",
        "publish_date",
        "published",
        "body",
    )
    search_fields = (
        "title",
        "subtitle",
        "slug",
        "body",
    )
    prepopulated_fields = {
        "slug": (
            "title",
            "subtitle",
        )
    }
    date_hierarchy = "publish_date"
    save_on_top = True


@admin.register(Tag)
class TagAdmin(admin.ModelAdmin):
    model = Tag


@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    model = Post
    form = PostModelAdminForm
    

    list_display = (
        "id",
        "title",
        "subtitle",
        "slug",
        "publish_date",
        "published",
        "body"
    )
    list_filter = (
        "published",
        "publish_date",
    )
    list_editable = (
        "title",
        "subtitle",
        "slug",
        "publish_date",
        "published",
        "body",
    )
    search_fields = (
        "title",
        "subtitle",
        "slug",
        "body",
    )
    prepopulated_fields = {
        "slug": (
            "title",
            "subtitle",
        )
    }
    date_hierarchy = "publish_date"
    save_on_top = True

Post.vue:

<template>
  <div class="container site-content text-light dark-bg">
    <template v-if="loading">
      <div class="alert alert-info" role="alert">Loading...</div>
    </template>
    <template v-else-if="error">
      <div class="alert alert-danger" role="alert">Error fetching post: {{ error.message }}</div>
    </template>
    <template v-else-if="result">
      <div class="post">
        <h2>{{ result.postBySlug.title }} {{ result.postBySlug.subtitle }}</h2>
        <p class="lead">By <AuthorLink :author="result.postBySlug.author" /></p>
        <div class="text-primary">{{ formatDate(result.postBySlug.publishDate) }}</div>
        <p class="post__description">{{ result.postBySlug.metaDescription }}</p>
         <article class="justify-text">
          <!-- Replace double newline characters with <p> tags for paragraphs -->
          <template v-for="(paragraph, index) in result.postBySlug.body.split('<br>')" :key="index">
            <p v-if="paragraph.trim().length > 0">{{ paragraph }}</p>
          </template>
        </article>
      </div>
    </template>
    <template v-else>
      <div class="alert alert-warning" role="alert">No post found.</div>
    </template>
  </div>
</template>


<script setup>
import { ref, watchEffect, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
import AuthorLink from '@/components/AuthorLink.vue';
import { format } from "date-fns";

const route = useRoute();
const formattedDate = ref('');

const { result, loading, error } = useQuery(gql`
  query GetPostBySlug($slug: String!) {
    postBySlug(slug: $slug) {
      title
      subtitle
      publishDate
      metaDescription
      slug
      body
      author {
        user {
          username
          firstName
          lastName
        }
      }
      tags {
        name
      }
    }
  }`,
  { slug: route.params.slug }
);

const formatDate = (dateString) => {
  const date = new Date(dateString);
  return format(date, 'EEEE, MMMM d, yyyy');
};

watchEffect(() => {
  if (result && result.postBySlug && result.postBySlug.publishDate) {
    const date = new Date(result.postBySlug.publishDate);
    formattedDate.value = format(date, 'EEEE, MMMM d, yyyy');
  }
});

onMounted(() => {
  if (!loading.value && error.value) {
    console.error('Error fetching post:', error.value);
  }
});
</script>

<style>
.justify-text {
  text-align: justify;
  white-space: pre-line;
}

.dark-bg {
  background-color: #343a40; /* Use your preferred dark color code */
}

</style>
Вернуться на верх