feat: Implement blog and blog post models, routes, and services
- Added Blog and BlogPost models with necessary fields and relationships. - Created blogRouter for handling blog-related API endpoints including CRUD operations. - Developed BlogService for business logic related to blogs and posts, including sharing functionality. - Implemented API client methods for frontend to interact with blog-related endpoints. - Added internationalization support for blog-related text in English and German. - Created Vue components for blog editing, listing, and viewing, including a rich text editor for post content. - Enhanced user experience with form validations and dynamic visibility settings based on user input.
This commit is contained in:
Torsten Schulz (local)
201
frontend/src/views/blog/BlogEditorView.vue
Normal file
201
frontend/src/views/blog/BlogEditorView.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="blog-editor">
|
||||
<h1>{{ isEdit ? 'Blog bearbeiten' : 'Blog erstellen' }}</h1>
|
||||
<form @submit.prevent="save">
|
||||
<div>
|
||||
<label>Titel</label>
|
||||
<input v-model="form.title" required />
|
||||
</div>
|
||||
<div>
|
||||
<label>Beschreibung</label>
|
||||
<textarea v-model="form.description"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label>Sichtbarkeit</label>
|
||||
<select v-model="form.visibility">
|
||||
<option value="public">Öffentlich</option>
|
||||
<option value="logged_in">Nur eingeloggte Nutzer</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="form.visibility === 'logged_in'">
|
||||
<label>Altersbereich</label>
|
||||
<div class="row">
|
||||
<input type="number" min="0" v-model.number="form.ageMin" placeholder="min" />
|
||||
<input type="number" min="0" v-model.number="form.ageMax" placeholder="max" />
|
||||
</div>
|
||||
<label>Geschlecht</label>
|
||||
<div class="row">
|
||||
<label><input type="checkbox" value="m" v-model="genderSel"> Männlich</label>
|
||||
<label><input type="checkbox" value="f" v-model="genderSel"> Weiblich</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn" type="submit">Speichern</button>
|
||||
</form>
|
||||
|
||||
<div v-if="isEdit" class="post-editor">
|
||||
<h2>Neuer Beitrag</h2>
|
||||
<form @submit.prevent="addPost">
|
||||
<input v-model="post.title" placeholder="Titel" required />
|
||||
<RichTextEditor v-model="post.content" :blog-id="$route.params.id" />
|
||||
<button class="btn" type="submit">Beitrag hinzufügen</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="isEdit" class="share-section">
|
||||
<h2>Blog teilen</h2>
|
||||
<div class="share-url">
|
||||
<label>URL</label>
|
||||
<input :value="currentShareUrl" readonly @focus="$event.target.select()" />
|
||||
<button class="btn" type="button" @click="copyUrl">Link kopieren</button>
|
||||
</div>
|
||||
<div class="share-actions">
|
||||
<button class="btn" type="button" @click="shareToFriends">An Freunde senden</button>
|
||||
</div>
|
||||
<div class="share-email">
|
||||
<label>E-Mail-Adressen (Kommagetrennt)</label>
|
||||
<input v-model="emailInput" placeholder="name@example.com, second@example.org" />
|
||||
<button class="btn" type="button" @click="shareToEmails">Senden</button>
|
||||
<p v-if="form.visibility !== 'public'" class="hint">Hinweis: Dieser Blog ist nicht öffentlich. Empfänger benötigen ggf. ein Login und passende Alters/Geschlechts-Berechtigung.</p>
|
||||
</div>
|
||||
<p v-if="shareStatus" class="status">{{ shareStatus }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createBlog, updateBlog, getBlog, createPost, shareBlog } from '@/api/blogApi.js';
|
||||
import RichTextEditor from './components/RichTextEditor.vue';
|
||||
export default {
|
||||
name: 'BlogEditorView',
|
||||
components: { RichTextEditor },
|
||||
computed: {
|
||||
isEdit() { return !!this.$route.params.id; },
|
||||
isOwner() {
|
||||
const u = this.$store.getters.user;
|
||||
return !!(u && this.ownerHashedId && this.ownerHashedId === u.id);
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
form: { title: '', description: '', visibility: 'public', ageMin: null, ageMax: null },
|
||||
genderSel: [],
|
||||
post: { title: '', content: '' },
|
||||
ownerHashedId: null,
|
||||
emailInput: '',
|
||||
shareStatus: '',
|
||||
currentShareUrl: '',
|
||||
ownerUsername: '',
|
||||
}),
|
||||
async mounted() {
|
||||
if (this.isEdit) {
|
||||
const b = await getBlog(this.$route.params.id).catch(() => null);
|
||||
if (!b) return this.$router.replace('/blogs');
|
||||
this.ownerHashedId = b.owner?.hashedId || null;
|
||||
this.ownerUsername = b.owner?.username || '';
|
||||
if (!this.isOwner) return this.$router.replace(`/blogs/${this.$route.params.id}`);
|
||||
this.form = {
|
||||
title: b.title,
|
||||
description: b.description,
|
||||
visibility: b.visibility,
|
||||
ageMin: b.ageMin,
|
||||
ageMax: b.ageMax,
|
||||
};
|
||||
this.genderSel = (b.genders ? b.genders.split(',').filter(Boolean) : []);
|
||||
this.currentShareUrl = this.buildSlugUrl(b.title);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async save() {
|
||||
if (this.form.visibility === 'logged_in') {
|
||||
if (this.form.ageMin != null && this.form.ageMax != null && this.form.ageMin > this.form.ageMax) {
|
||||
alert('Ungültiger Altersbereich');
|
||||
return;
|
||||
}
|
||||
}
|
||||
const payload = { ...this.form, genders: this.genderSel };
|
||||
if (this.isEdit) {
|
||||
await updateBlog(this.$route.params.id, payload);
|
||||
this.$router.push(`/blogs/${this.$route.params.id}`);
|
||||
} else {
|
||||
const b = await createBlog(payload);
|
||||
this.$router.push(`/blogs/${b.id}`);
|
||||
}
|
||||
},
|
||||
async addPost() {
|
||||
if (!this.isEdit) return;
|
||||
await createPost(this.$route.params.id, this.post);
|
||||
this.post = { title: '', content: '' };
|
||||
// optional: navigate to view; keep simple for now
|
||||
},
|
||||
blogAbsoluteUrl() {
|
||||
try {
|
||||
const origin = window.location.origin;
|
||||
const uname = (this.ownerUsername || this.$store.getters.user?.username || '').toString();
|
||||
const titlePart = (this.form.title||'').toString().replace(/\s+/g, '').replace(/[^a-zA-Z0-9_-]/g, '');
|
||||
const slug = `${uname}${titlePart}`.replace(/[^a-zA-Z0-9_-]/g, '');
|
||||
return `${origin}/blogs/${encodeURIComponent(slug)}`;
|
||||
} catch {
|
||||
const uname = (this.ownerUsername || this.$store.getters.user?.username || '').toString();
|
||||
const titlePart = (this.form.title||'').toString().replace(/\s+/g, '').replace(/[^a-zA-Z0-9_-]/g, '');
|
||||
const slug = `${uname}${titlePart}`.replace(/[^a-zA-Z0-9_-]/g, '');
|
||||
return `/blogs/${encodeURIComponent(slug)}`;
|
||||
}
|
||||
},
|
||||
buildSlugUrl(title) {
|
||||
const origin = window.location.origin;
|
||||
const uname = (this.ownerUsername || this.$store.getters.user?.username || '').toString();
|
||||
const titlePart = (title || '').toString().replace(/\s+/g, '').replace(/[^a-zA-Z0-9_-]/g, '');
|
||||
const base = `${uname}${titlePart}`.replace(/[^a-zA-Z0-9_-]/g, '');
|
||||
return `${origin}/blogs/${encodeURIComponent(base)}`;
|
||||
},
|
||||
async copyUrl() {
|
||||
const url = this.currentShareUrl || this.blogAbsoluteUrl();
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
this.shareStatus = 'Link kopiert';
|
||||
} catch {
|
||||
this.shareStatus = 'Kopieren fehlgeschlagen';
|
||||
}
|
||||
setTimeout(() => (this.shareStatus = ''), 2000);
|
||||
},
|
||||
async shareToFriends() {
|
||||
try {
|
||||
const res = await shareBlog(this.$route.params.id, { toFriends: true });
|
||||
if (res.url) this.currentShareUrl = res.url;
|
||||
this.shareStatus = `An ${res.notifiedFriends || 0} Freund(e) gesendet.`;
|
||||
} catch (e) {
|
||||
this.shareStatus = 'Teilen fehlgeschlagen';
|
||||
}
|
||||
setTimeout(() => (this.shareStatus = ''), 3000);
|
||||
},
|
||||
async shareToEmails() {
|
||||
const emails = this.emailInput.split(',').map(s => s.trim()).filter(Boolean);
|
||||
if (!emails.length) return;
|
||||
try {
|
||||
const res = await shareBlog(this.$route.params.id, { emails });
|
||||
if (res.url) this.currentShareUrl = res.url;
|
||||
this.shareStatus = `${res.emailsSent || 0} E-Mail(s) versendet.`;
|
||||
} catch (e) {
|
||||
this.shareStatus = 'E-Mail-Versand fehlgeschlagen';
|
||||
}
|
||||
setTimeout(() => (this.shareStatus = ''), 3000);
|
||||
}
|
||||
}
|
||||
,
|
||||
watch: {
|
||||
'form.title'(t) {
|
||||
if (this.isEdit) this.currentShareUrl = this.buildSlugUrl(t);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row { display: flex; gap: .5rem; }
|
||||
.btn { margin-top: .5rem; }
|
||||
.post-editor, .share-section { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ddd; }
|
||||
.share-url { display: flex; align-items: center; gap: .5rem; }
|
||||
.share-url input { flex: 1; }
|
||||
.share-email { margin-top: .5rem; }
|
||||
.hint { color: #a66; font-size: .9em; }
|
||||
.status { color: #2a6; font-size: .95em; margin-top: .5rem; }
|
||||
</style>
|
||||
29
frontend/src/views/blog/BlogListView.vue
Normal file
29
frontend/src/views/blog/BlogListView.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="blog-list">
|
||||
<h1>Blogs</h1>
|
||||
<div class="toolbar">
|
||||
<router-link v-if="$store.getters.isLoggedIn" class="btn" to="/blogs/create">Neuen Blog erstellen</router-link>
|
||||
</div>
|
||||
<div v-if="loading">Laden…</div>
|
||||
<div v-else>
|
||||
<div v-if="!blogs.length">Keine Blogs gefunden.</div>
|
||||
<ul>
|
||||
<li v-for="b in blogs" :key="b.id">
|
||||
<router-link :to="`/blogs/${b.id}`">{{ b.title }}</router-link>
|
||||
<small> – {{ b.owner?.username }}</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listBlogs } from '@/api/blogApi.js';
|
||||
export default {
|
||||
name: 'BlogListView',
|
||||
data: () => ({ blogs: [], loading: true }),
|
||||
async mounted() {
|
||||
try { this.blogs = await listBlogs(); } finally { this.loading = false; }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
109
frontend/src/views/blog/BlogView.vue
Normal file
109
frontend/src/views/blog/BlogView.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="blog-view">
|
||||
<div v-if="loading">Laden…</div>
|
||||
<div v-else>
|
||||
<h1>{{ blog.title }}</h1>
|
||||
<p v-if="blog.description">{{ blog.description }}</p>
|
||||
<div class="meta">von {{ blog.owner?.username }}</div>
|
||||
<div v-if="$store.getters.isLoggedIn" class="actions">
|
||||
<router-link class="editbutton" v-if="isOwner" :to="{ name: 'BlogEdit', params: { id: blog.id } }">Bearbeiten</router-link>
|
||||
</div>
|
||||
<div class="posts">
|
||||
<h2>{{ $t('blog.posts') }}</h2>
|
||||
<div v-if="!items.length">{{ $t('blog.noPosts') }}</div>
|
||||
<article v-for="p in items" :key="p.id" class="post">
|
||||
<h3>{{ p.title }}</h3>
|
||||
<div class="content" v-html="sanitize(p.content)" />
|
||||
</article>
|
||||
<div class="pagination" v-if="total > pageSize">
|
||||
<button :disabled="page===1" @click="go(page-1)">«</button>
|
||||
<span>{{ page }} / {{ pages }}</span>
|
||||
<button :disabled="page===pages" @click="go(page+1)">»</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isOwner" class="post-editor">
|
||||
<h3>{{ $t('blog.newPost') }}</h3>
|
||||
<form @submit.prevent="addPost">
|
||||
<input v-model="newPost.title" :placeholder="$t('blog.title')" required />
|
||||
<RichTextEditor v-model="newPost.content" :blog-id="blog.id" />
|
||||
<button class="btn" type="submit">{{ $t('blog.publish') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getBlog, listPosts, createPost } from '@/api/blogApi.js';
|
||||
import DOMPurify from 'dompurify';
|
||||
import RichTextEditor from './components/RichTextEditor.vue';
|
||||
export default {
|
||||
name: 'BlogView',
|
||||
props: { id: String, slug: String },
|
||||
components: { RichTextEditor },
|
||||
data: () => ({ blog: null, items: [], page: 1, pageSize: 10, total: 0, loading: true, newPost: { title: '', content: '' }, resolvedId: null }),
|
||||
computed: {
|
||||
isOwner() {
|
||||
const u = this.$store.getters.user;
|
||||
return !!(u && this.blog && this.blog.owner && this.blog.owner.hashedId === u.id);
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
let id = this.$route.params.id;
|
||||
// If we have a slug route param or the id is non-numeric, resolve to id
|
||||
if ((!id && this.$route.params.slug) || (id && isNaN(Number(id)))) {
|
||||
const slug = this.$route.params.slug || this.$route.params.id;
|
||||
// Resolve slug to id via backend resolver but keep slug URL
|
||||
const res = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001'}/api/blog/blogs/slug/${encodeURIComponent(slug)}/id`);
|
||||
if (res.ok) {
|
||||
const { id: rid } = await res.json();
|
||||
this.resolvedId = rid;
|
||||
id = rid;
|
||||
} else {
|
||||
throw new Error('slug not found');
|
||||
}
|
||||
}
|
||||
const useId = id || this.resolvedId;
|
||||
this.blog = await getBlog(useId);
|
||||
await this.fetchPage(1);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
// this.$router.replace('/blogs');
|
||||
} finally { this.loading = false; }
|
||||
},
|
||||
methods: {
|
||||
sanitize(html) {
|
||||
return DOMPurify.sanitize(html || '');
|
||||
},
|
||||
async fetchPage(p) {
|
||||
const id = this.$route.params.id || this.resolvedId;
|
||||
const res = await listPosts(id, { page: p, pageSize: this.pageSize });
|
||||
this.items = res.items;
|
||||
this.page = res.page;
|
||||
this.pageSize = res.pageSize;
|
||||
this.total = res.total;
|
||||
},
|
||||
get pages() { return Math.max(1, Math.ceil(this.total / this.pageSize)); },
|
||||
async go(p) { if (p>=1 && p<=this.pages) await this.fetchPage(p); },
|
||||
async addPost() {
|
||||
if (!this.newPost.title || !this.newPost.content) return;
|
||||
const id = this.$route.params.id || this.resolvedId;
|
||||
await createPost(id, this.newPost);
|
||||
this.newPost = { title: '', content: '' };
|
||||
await this.fetchPage(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.editbutton {
|
||||
border: 1px solid #000;
|
||||
background-color: #f9a22c;
|
||||
margin-bottom: 1em;
|
||||
border-radius: 3px;
|
||||
padding: 0.2em 0.5em;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
124
frontend/src/views/blog/components/RichTextEditor.vue
Normal file
124
frontend/src/views/blog/components/RichTextEditor.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="rte">
|
||||
<div class="toolbar">
|
||||
<button type="button" @click="toggle('bold')"><b>B</b></button>
|
||||
<button type="button" @click="toggle('italic')"><i>I</i></button>
|
||||
<button type="button" @click="toggle('underline')"><u>U</u></button>
|
||||
<select v-model="heading" @change="applyHeading">
|
||||
<option :value="0">P</option>
|
||||
<option :value="1">H1</option>
|
||||
<option :value="2">H2</option>
|
||||
<option :value="3">H3</option>
|
||||
</select>
|
||||
<button type="button" @click="setAlign('left')">⟸</button>
|
||||
<button type="button" @click="setAlign('center')">⇔</button>
|
||||
<button type="button" @click="setAlign('right')">⟹</button>
|
||||
<input type="color" v-model="color" @input="setColor" />
|
||||
<button type="button" @click="openImagePicker">🖼️</button>
|
||||
<input ref="file" type="file" accept="image/*" class="hidden" @change="onUpload" />
|
||||
</div>
|
||||
<EditorContent v-if="editor" :editor="editor" class="editor" />
|
||||
|
||||
<div v-if="showPicker" class="picker">
|
||||
<div class="picker-header">
|
||||
<span>{{ $t('blog.pickImage') }}</span>
|
||||
<button @click="showPicker=false">✕</button>
|
||||
</div>
|
||||
<div class="picker-actions">
|
||||
<button @click="triggerUpload">{{ $t('blog.uploadImage') }}</button>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="thumb" v-for="img in images" :key="img.id" @click="insertGallery(img)">
|
||||
<img :src="imageUrl(img)" :alt="img.title" />
|
||||
<div class="title">{{ img.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { EditorContent, Editor } from '@tiptap/vue-3';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import TextAlign from '@tiptap/extension-text-align';
|
||||
import Underline from '@tiptap/extension-underline';
|
||||
import TextStyle from '@tiptap/extension-text-style';
|
||||
import Color from '@tiptap/extension-color';
|
||||
import Image from '@tiptap/extension-image';
|
||||
import { listBlogImages, uploadBlogImage } from '@/api/blogApi.js';
|
||||
|
||||
export default {
|
||||
name: 'RichTextEditor',
|
||||
components: { EditorContent },
|
||||
props: { modelValue: { type: String, default: '' }, blogId: { type: [String, Number], required: true } },
|
||||
emits: ['update:modelValue'],
|
||||
data: () => ({ editor: null, heading: 0, color: '#000000', showPicker: false, images: [] }),
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [StarterKit, Underline, TextStyle, Color, Image, TextAlign.configure({ types: ['heading', 'paragraph'] })],
|
||||
content: this.modelValue || '',
|
||||
editable: true,
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class: 'pm-root'
|
||||
}
|
||||
},
|
||||
onUpdate: ({ editor }) => this.$emit('update:modelValue', editor.getHTML())
|
||||
});
|
||||
},
|
||||
beforeUnmount() { this.editor?.destroy?.(); },
|
||||
methods: {
|
||||
toggle(cmd) { this.editor?.chain().focus()[cmd]().run(); },
|
||||
applyHeading() {
|
||||
const level = Number(this.heading);
|
||||
const chain = this.editor?.chain().focus();
|
||||
if (level === 0) { chain.setParagraph().run(); } else { chain.toggleHeading({ level }).run(); }
|
||||
},
|
||||
setAlign(a) { this.editor?.chain().focus().setTextAlign(a).run(); },
|
||||
setColor() { this.editor?.chain().focus().setColor(this.color).run(); },
|
||||
openImagePicker: async function() {
|
||||
this.showPicker = true;
|
||||
const res = await listBlogImages(this.blogId);
|
||||
this.images = res.images || [];
|
||||
},
|
||||
imageUrl(img) { return `/api/blog/blogs/images/${img.hash}`; },
|
||||
insertGallery(img) {
|
||||
this.editor?.chain().focus().setImage?.({ src: this.imageUrl(img), alt: img.title }).run?.();
|
||||
// fallback: insert simple <img>
|
||||
if (!this.editor?.isActive('image')) {
|
||||
const html = `<img src="${this.imageUrl(img)}" alt="${img.title || ''}">`;
|
||||
this.editor.commands.insertContent(html);
|
||||
}
|
||||
this.showPicker = false;
|
||||
},
|
||||
triggerUpload() { this.$refs.file.click(); },
|
||||
async onUpload(e) {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const img = await uploadBlogImage(this.blogId, file, { title: file.name });
|
||||
this.images.unshift(img);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue(v) { if (this.editor && v !== this.editor.getHTML()) this.editor.commands.setContent(v || '', false); }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rte { position: relative; }
|
||||
.toolbar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.5rem; }
|
||||
.hidden{ display:none }
|
||||
.editor { border:1px solid #ccc; min-height:260px; padding:0; cursor:text; }
|
||||
:deep(.ProseMirror) { min-height: 260px; outline: none; padding:.5rem; box-sizing: border-box; width:100%; }
|
||||
:deep(.ProseMirror p) { margin: 0 0 .6rem; }
|
||||
:deep(.ProseMirror p:first-child) { margin-top: 0; }
|
||||
:deep(.ProseMirror-focused) { outline: 2px solid rgba(100,150,255,.35); }
|
||||
.picker { position:absolute; top:2.5rem; left:0; right:0; background:#fff; border:1px solid #ccc; padding:.5rem; z-index:10; max-height:50vh; overflow:auto; }
|
||||
.picker-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
|
||||
.picker-actions { margin-bottom:.5rem; }
|
||||
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:.5rem; }
|
||||
.thumb { border:1px solid #ddd; padding:.25rem; cursor:pointer; }
|
||||
.thumb img { width:100%; height:90px; object-fit:cover; display:block; }
|
||||
.thumb .title { font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
</style>
|
||||
@@ -14,7 +14,7 @@
|
||||
</ul>
|
||||
|
||||
<div class="editor-container">
|
||||
<EditorContent :editor="editor" class="editor" />
|
||||
<EditorContent v-if="editor" :editor="editor" class="editor" />
|
||||
</div>
|
||||
<button @click="saveNewMessage">{{ $t('socialnetwork.forum.createNewMesssage') }}</button>
|
||||
</template>
|
||||
@@ -47,6 +47,8 @@ export default {
|
||||
this.editor = new Editor({
|
||||
extensions: [StarterKit],
|
||||
content: '',
|
||||
editable: true,
|
||||
editorProps: { attributes: { class: 'pm-root' } },
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
@@ -126,13 +128,24 @@ export default {
|
||||
.editor-container {
|
||||
margin-top: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
min-height: 200px;
|
||||
padding: 0;
|
||||
min-height: 260px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.editor {
|
||||
min-height: 150px;
|
||||
min-height: 260px;
|
||||
outline: none;
|
||||
cursor: text;
|
||||
}
|
||||
.editor :deep(.ProseMirror) {
|
||||
min-height: 260px;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
.editor :deep(.ProseMirror p) { margin: 0 0 .6rem; }
|
||||
.editor :deep(.ProseMirror p:first-child) { margin-top: 0; }
|
||||
.editor :deep(.ProseMirror-focused) { outline: 2px solid rgba(100,150,255,.35); }
|
||||
</style>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="editor-container">
|
||||
<EditorContent :editor="editor" class="editor" />
|
||||
<EditorContent v-if="editor" :editor="editor" class="editor" />
|
||||
</div>
|
||||
<button @click="saveNewTopic">
|
||||
{{ $t('socialnetwork.forum.createNewTopic') }}
|
||||
@@ -89,6 +89,8 @@ export default {
|
||||
this.editor = new Editor({
|
||||
extensions: [StarterKit],
|
||||
content: '',
|
||||
editable: true,
|
||||
editorProps: { attributes: { class: 'pm-root' } },
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
@@ -111,6 +113,7 @@ export default {
|
||||
this.inCreation = !this.inCreation
|
||||
if (this.inCreation && this.editor) {
|
||||
this.editor.commands.setContent('')
|
||||
this.$nextTick(() => this.editor?.commands.focus('end'))
|
||||
}
|
||||
},
|
||||
async saveNewTopic() {
|
||||
@@ -167,14 +170,25 @@ export default {
|
||||
.editor-container {
|
||||
margin: 1em 0;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
min-height: 200px;
|
||||
padding: 0;
|
||||
min-height: 260px;
|
||||
background-color: white;
|
||||
}
|
||||
.editor {
|
||||
min-height: 150px;
|
||||
min-height: 260px;
|
||||
outline: none;
|
||||
cursor: text;
|
||||
}
|
||||
.editor :deep(.ProseMirror) {
|
||||
min-height: 260px;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
.editor :deep(.ProseMirror p) { margin: 0 0 .6rem; }
|
||||
.editor :deep(.ProseMirror p:first-child) { margin-top: 0; }
|
||||
.editor :deep(.ProseMirror-focused) { outline: 2px solid rgba(100,150,255,.35); }
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
Reference in New Issue
Block a user