راکت
حل شده

راهنمایی در استفاده از CMS

4 پاسخ

سلام
وقت همگی بخیر
من یک وبسایت خدماتی توسعه میدم که بکندش با NestJS و فرانتش با Nuxt است. در این وبسایت خدماتی نیاز به یک قسمت CMS دارم که نقش نویسنده بتواند محتوا بنویسد.
پیشنهادتون برای پیاده سازی این قسمت چیست؟ از کدام پکیج یا پلتفرم میتوانم استفاده کنم؟

ثبت پرسش جدید

پاسخ‌ها

4
electera
electera
@electera
بهترین پاسخ

میتونی از ادیتورهای مختلف استفاده کنی، نمونه ckeditor
از شانست الان پروژه جلوم بازه، طبق مستنداتش نصب کن:
ckeditor-nuxt

تو فایل editor.vue کدهای زیر رو بزار:
components/Editor.vue

<template>
<ckeditor v-model="data" :editor="ClassicEditor" :config="config" />
</template>

<script setup>
import { ref, computed } from 'vue';
import {
    ClassicEditor, Essentials, Paragraph, Heading,
    Bold, Italic, Strikethrough, Subscript, Code,
    Link, BlockQuote, CodeBlock, ImageInsert, AutoImage, Image, ImageResizeEditing, ImageResizeHandles, Base64UploadAdapter,
    Alignment, Indent, RemoveFormat, ShowBlocks,
    FontFamily, FontSize, FontColor, FontBackgroundColor,
    TodoList,
} from 'ckeditor5';
// import { FormatPainter } from 'ckeditor5-premium-features';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

import 'ckeditor5/ckeditor5.css';
// import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

const data = ref('');

const config = computed(() => {
    return {
        licenseKey: 'GPL', // Or 'GPL'.
        plugins: [Essentials, Paragraph, Heading,
            Bold, Italic, Strikethrough, Subscript, Code,
            Link, BlockQuote, CodeBlock, ImageInsert, AutoImage, Image, ImageResizeEditing, ImageResizeHandles, Base64UploadAdapter,
            Alignment, Indent, RemoveFormat, ShowBlocks,
            FontFamily, FontSize, FontColor, FontBackgroundColor,
            TodoList,
        ],
        toolbar: ['heading', '|', 'undo', 'redo',
            '|', 'bold', 'italic', 'strikethrough', 'subscript', 'subscript', 'code',
            '|', 'Link', 'insertImage', 'blockQuote', 'codeBlock',
            '|', 'Alignment', 'indent', 'RemoveFormat', 'ShowBlocks',
            '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
            '|', 'todoList',
        ],
        language: 'fa',
        menuBar: {
            isVisible: true
        }
    };
});
</script>

تو پنل مدیریت و جایی که میخوایی استفاده کنی:

<template>
    <ClientOnly>
        <Editor v-model="data" />
    </ClientOnly>
</template>
<script setup>
const data = ref('');
</script>

بقیش طبق مستندات.

electera
electera
@electera

نیاز به پکیج یا پلتفرم نیست! چند خط کد میخواد.
شما مطمناً الان میدلور برای ادمین یا کاربر ثبت نام شده و... دارین، یکی هم برای نویسنده تو فرانت و بک بنویس و دسترسی مسیر یا صفحات رو براش تعریف کن، همین.
این موضوع ربطی به زبان و فریمورکی که استفاده میکنی نداره اما جهت راهنمایی تو ناکست برای صفحاتی که نویسنده اجازه داره:

<script setup>
definePageMeta({
    layout: "profile",
    middleware: "author"
});
</script>

تو فولدر middleware ناکست یک فایل author.js بساز و داخلش:

export default defineNuxtRouteMiddleware(() => {
    const { authUser } = useAuth();

    if (authUser.value.role !== 'author') {
        return navigateTo('/auth/login-register')
    }
});
عرفان شیربخت
عرفان شیربخت
@HelioErfan

تخصص: توسعه دهنده بک‌اند

ممنونم از راهنماییت
اما من منظورم این بود که از چی میتونم استفاده کنم که یک فضا بده به نویسنده که بتونه بنویسه. مثل همین قابلیت بولد کردن و چپ چین و راست چین کردن و عکس و لینک گذاشتن و بقیه موارد

شاید پاسخ شما همین‌جا باشد

عرفان شیربخت
عرفان شیربخت
@HelioErfan

تخصص: توسعه دهنده بک‌اند

ممنونم از راهنماییت و لطفت

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام