Как сделать абзац в форме 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>